标签: kendo-grid

使用以下类加载/过滤/订购Kendo网格的最佳方法是什么:

域:

public class Car
{
    public virtual int Id { get; set; }
    public virtual string Name { get; set; }
    public virtual bool IsActive { get; set; }
}

视图模型

public class CarViewModel
{
    public virtual int Id { get; set; }
    public virtual string Name { get; set; }
    public virtual string IsActiveText { get; set; }
}

AutoMapper

Mapper.CreateMap<Car, CarViewModel>()
      .ForMember(dest => dest.IsActiveText, 
                 src => src.MapFrom(m => m.IsActive ? "Yes" : "No"));

IQueryable的

var domainList = …

我正在尝试构建一个非常简单的Kendo CRUD网格,其中一个表只有两列:ID和Name.我已经使用serverside分页和服务器端过滤配置了网格.

一切似乎都按预期运行,但在创建新记录后,网格显示新记录但没有ID字段.在创建时,请求的ID为null,但我在创建后发送id和完整对象的值.在示例网格中,网格使用新值进行更新.我需要更改/添加什么来确保新创建的记录的ID也显示在Grid中？

以下是JSP:

        <script>


        $(function() {
            var dataSource =  new kendo.data.DataSource({
                transport: {
                    read: {
                        url:"http://localhost:8181/baseweb/countrylist",
                        dataType: "jsonp"
                    },
                    update: {
                        url: "http://localhost:8181/baseweb/countryupdate",
                        dataType: "jsonp"
                    },    
                    destroy: {
                        url: "http://localhost:8181/baseweb/countrydelete",
                        dataType: "jsonp"
                    }, 
                    create: {
                        url: "http://localhost:8181/baseweb/countrycreate",
                        dataType: "jsonp"
                    },                        
                    parameterMap: function(data, operation) {
                        if (operation !== "read" && data.models) {
                            return {grid_options: kendo.stringify(data.models)};
                        }
                        return {grid_options: kendo.stringify(data)};
                    }                       
                },
                serverPaging: true,
                serverFiltering: true,
                pageSize: 10,
                schema: {
                    data: "data",        
                    total: "total",                     
                    model: {
                        id: "id",
                        fields: {
                            id: …

我需要定义架构吗？如果是这样,那应该是什么样的？我对此的搜索似乎只出现了js解决方案,我正在寻找在editortemplate中定义它的语法.

共享/ editortemplate:

@(
Html.Kendo().DropDownList()
.Name("SearchFunction")
.DataTextField("SearchFunctionDesc")
.DataValueField("SearchFunctionCode")
.DataSource(source =>
    {        
        source.Read(read => { 
            read.Action("GetSearchFunctions", "User");
        });
    })
    .OptionLabel("--Select a Search Function--")
    .AutoBind(false)
)

在控制器中:

    public JsonResult GetSearchFunctions([DataSourceRequest] DataSourceRequest request)
    {
        var searchFuncs = AdminService.GetSearchFunctions();
        DataSourceResult result = searchFuncs.ToDataSourceResult(request);
        return Json(result, JsonRequestBehavior.AllowGet);
    }

然后我的Dapper db查询:

            var result = new List<SearchFunction>();
            using (var conn = new OracleConnection(DatabaseConnectionString))
            {
                conn.Open();
                string query = "select FUNCTION_ID, SEARCH_FUNCTION_CD, " +        
                        "SEARCH_FUNCTION_DESC, IS_ACTIVE " +
                         "from TBL_SEARCH_FUNCTIONS "; 
                result = conn.Query(query)
                    .Select(s => new SearchFunction …

我正在尝试做一些相对简单的事情,但是有一个让我发疯的问题,我确信我错过了一些简单的事情.

我有一个AngularJS网站,大部分工作正常,而且我有一个Kendo网格.我所要做的就是让网格的第一列有一个指向另一个页面的链接,使用网格数据中的ID.

我正在使用的代码如下所示,这是因为它创建了一个主要基于我要求的链接但是由于一些奇怪的原因,它作为URL的一部分使用的ID被四舍五入.举个例子,我需要使用的实际ID是37509488620601829,这是我的API返回的内容,如果我将ID字段设置为表格中的列,会显示什么,但是在链接中这会被舍入到37509488620601830(注意最后2位数).

对此有任何见解表示赞赏.

   <div kendo-grid k-data-source="SearchResultsGrid" k-columns="[{'field': 'Name' , 'title':'Name', 'template': '<a ui-sref=&quot;Id({ Id: #: Id # }) &quot;>#: Name #</a>'  },{'field': 'Alias' , 'title':'Alias' },{'field': 'Server' , 'title':'Server' },{'field': 'Faction' , 'title':'Faction' }]"></div>

问题陈述 ：

在下面的stackblitz演示中，我能够FormGroup通过单击Add按钮并(blur)从一个控件触发事件以更新共享该控件的另一个控件的值，在网格的开头动态插入动态对象rowIndex。现在的问题是，如果我在多个新添加的对象上插入多个formGroups并触发(blur)事件，FormGroups它将更新其他控件的值以及具有不同的值rowIndex。

重现此问题的步骤：

• 打开下面的演示链接。
• 通过单击添加按钮添加多行（2行）。
• 在第二个新添加的行的名称字段中输入值，然后将焦点对准。
• 它会在两个新添加的行中更新年龄字段，而不是仅在第二行中更新。

Stackblitz演示： https ://stackblitz.com/edit/angular-oitz5j-4uezqr

要求：

跳出特定行的任何名称字段，同一行的“年龄”字段应显示一个随机数，而不会影响其他行。

到目前为止我尝试了什么？

• 试图使用Array unshift（）方法但出现错误

  类型“ FormArray”上不存在属性“ unshift”

• 尝试使用FormArray.insert（）方法。如果我们要FormGroup在特定索引处添加一个，它将可以工作。但是它无法FormGroups在FormArray动态顶部插入多个。

更新：如果没有Kendo Grid，上述问题可以正常工作。请检查以下演示。

演示： https : //stackblitz.com/edit/angular-oitz5j-2a31gs

github / stackoverflow中的相关问题：

https://github.com/angular/angular/issues/16322

Angular-表单数组推送特定索引

注意：如果我们要将控件添加到Grid的末尾，则它的工作原理很简单。请检查下面的演示，该演示在最后添加控件时效果很好。

演示： https : //stackblitz.com/edit/angular-oitz5j-aszrjq

firefox浏览器中的错误如下:TypeError:r未定义

这是chrome浏览器:Uncaught TypeError:无法读取undefined的属性'data'

我还制作了一个视频,以便更好地理解.

当我更改字段中的值时发生错误

jsfiddle代码

youtube视频

按钮代码更新

      save: function (e) {
            var that = this;
            $.ajax({

                url: '/api/apdevice',
                type: e.model.id == null ? 'POST' : 'PUT',
                contentType: 'application/json',
                data: JSON.stringify(e.model),
                success: function (data) {
                    alert('yes');
                    that.refresh();
                },

                error: function (data) {
                    alert('no');
                    that.cancelRow();
                }

            });
        }

我正在使用KendoUI Grid(Web框架).json正在从ASP.NET MVC ViewBag页面加载时加载的本地数据填充.我在网格初始化之前在单独的变量中声明数据源并填充来自datasoruce的数据.我遇到的问题是,首次过滤或清除后,过滤器菜单会中断(查看图像).每次下次单击过滤器或清除按钮时,它会隐藏更多控件,直到只剩下两个按钮.奇怪的是,控制台中没有报告错误.我已经在这个问题上工作了一个多星期,但我似乎找不到任何有关它的信息,也没有接近可能的解决方案.

我知道非英语代码很难理解,但我很乐意翻译并解释它的含义!

遗憾的是,我无法提供指向运行此页面的服务器的链接,因为它需要登录并且页面已经发布 - 这意味着将凭据公开放在一起并不是一个好主意.虽然我一直在努力拼凑出一个工作小提琴,但我还是无法让它发挥作用.

我正在使用此代码:

root.seznamDataSource = new kendo.data.DataSource({
  data: zahteveData,
  pageSize: 15,
  schema: {
    model: {
      fields: {
        IdZahteve: {
          type: "number"
        },
        Naslov: {
          type: "string"
        },
        Datum: {
          type: "date"
        },
        Status: {
          type: "string"
        },
        Narocnik: {
          type: "string"
        },
        PoslovniPartner: {
          type: "string"
        }
      }
    }
  },
  change: function(e) {
    var urejeniItemi;
    if ((e.sender._sort != null) 
       && (e.sender._sort[0] != null) 
       && e.sender._sort[0].field === "Status") { …

我已经设置了我的kendo ui网格来从返回JSON的MVC动作中读取数据.由于成本原因,我使用的是剑道的免费版本而不是MVC.

问题是,当页面加载并执行网格的初始填充时,它不会显示加载微调器.填充网格后,我会转到另一个页面或对其显示的列进行排序.

如果我设置网格的高度参数,我得到初始微调器,但网格只显示一行(应该显示20).

有谁知道为什么你要设置高度参数？或任何方式让旋转器工作而不设置高度.

我的剑道javascript kode:

$("#grid").kendoGrid({
        dataSource: new kendo.data.DataSource({
            transport: {
                read: url,
                parameterMap: function (options) {
                    var result = {
                        pageSize: options.pageSize,
                        skip: options.skip,
                        take: options.take,
                        page: options.page,
                    };

                    if (options.sort) {
                        for (var i = 0; i < options.sort.length; i++) {
                            result["sort[" + i + "].field"] = options.sort[i].field;
                            result["sort[" + i + "].dir"] = options.sort[i].dir;
                        }
                    }

                    return result;
                }
            },
            requestStart: function () {
                //kendo.ui.progress($("#loading"), true); <-- this works on initial load, but gives two …

我想设计我的剑道网格,每行都有颜色.如果数据库中有警报,则这些行必须为红色,否则它们必须为绿色.

这是我的代码:

public JsonResult Getdata()
{
    var reports = db.ActivityLog.OrderBy(c => c.dateTime).ToList();
    var collection = reports.Select(x => new
    {
        username = x.uName,
        location = x.locName,
        devices = x.devName,
        alarm = x.alarm
    });
    return Json(collection, JsonRequestBehavior.AllowGet);
}

我的看法:

function handleDataFromServer() {

    $("#grid").data("kendoGrid").dataSource.read();
}

window.setInterval("handleDataFromServer()", 10000);

$(document).ready(function () {
    $("#grid").kendoGrid({
        sortable: true,
        pageable: {
            input: true,
            numeric: false
        },
        selectable: "multiple",
        dataSource: {
            transport: {
                read: "/Home/Getdata",
                type: "json"
            }
        },
        columns: [
                        { field: "username", width: "80px" },
                        { field: "location", …

在将我的kendo-ui网格移动到bootstrap模式中之前,我会点击A​​dd Row,然后选择3个输入中的第一个.然后我会选择第二个,然后是第三个然后选项卡到复选框按钮,我将按下回车键并添加行.然后焦点将返回到"添加行"按钮,我可以按Enter键再次开始处理.那么现在它在一个模态中我失去了除了标签之外的一切.我找到了使用jquery来应用焦点的解决方案,但我已经在我的网格控制器中有了它.

Kendo-ui网格控制器

 $scope.mainGridOptions = {
        dataSource: dataSource,
        pageable: false,
        toolbar: [{ name: "create", text: "Add Product", }],
        columns: [
        { field: "product", title: "Product", width: "95px", editor: productEditor },
        {
            field: "price", title: "Price", width: "95px", format: "{0:c2}", editor: priceEditor
        },
        {
            field: "sqft", title: "Square Feet", width: "95px", editor: sqftEditor
        },
        {
            command: [{ name: 'edit', text: { edit: '', update: '', cancel: '' }, width: '20px' }, { name: 'destroy', text: '' }], title: ' ', width: '80px' …