Kendo UI 网格 Javascript 数据源调用控制器操作

Question

我无法将我的 JavaScript kendo ui 网格绑定到来自操作方法的模型数据。我看到的所有示例主要是 MVC 包装器，JavaScript 示例各不相同，none 似乎对我有用。

这是我在下方的位置。

我用有效的静态数据进行了通用测试。

var dataSource_Test = new kendo.data.DataSource({
        data: [{ LeagueDetailGroupId: "15", GroupName: "Best Team 5"}]
});

这是我尝试使用控制器操作创建的数据源对象：

var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "@Url.Action("LeagueDetailGroup_Read", "Configuration")?_leagueTypeId=" + leagueTypeId,
                    // i have tried all kinds of variants here, and not sure what to put
                    // my action method is returning json using kendo's DataSourceResult method
                    //contentType: "application/json",
                    type: "POST"
                    //dataType: "odata"
                },
                schema: {
                    data: "Data", // seen this in examples, dunno what it does
                    total: "Total", // seen this in examples, dunno what it does
                    model: {
                        id: "LeagueDetailGroupId",
                        fields: {
                            LeagueDetailGroupId: { editable: false, nullable: true },
                            GroupName: { validation: { required: true } }
                        }
                    }
                },          
                // i seen this is an example from telerik but dont understand the use case for it                       
                parameterMap: function (data, operation) {
                    // this prints no data before i even start so its a moot point configuring it from products to my stuff at this moment
                    // but not sure what todo here of if i need this anyways
                    console.log(data);          
                    if (operation != "read") {
                        // post the products so the ASP.NET DefaultModelBinder will understand them
                        var result = {};
                        for (var i = 0; i < data.models.length; i++) {
                            var product = data.models[i];

                            for (var member in product) {
                                result["products[" + i + "]." + member] = product[member];
                            }
                        }
                        return result;                                 
                    } else {
                        return JSON.stringify(data)
                    }
                }
            }
        });

这是适用于通用静态数据源对象的网格。

var grid = $("#leagueEdit_ldg_grid").kendoGrid({
                        dataSource: dataSource,
                        sortable: true,
                        pageable: true,
                        autobind: false,
                        //detailInit: leagueEdit_ldg_detailInit,
                        dataBound: function () {
                            this.expandRow(this.tbody.find("tr.k-master-row").first());
                        },
                        columns: [
                            {
                                field: "LeagueDetailGroupId",
                                title: "Group Id",
                                width: "110px"
                            },
                            {
                                field: "GroupName",
                                title: "Group Name",
                                width: "110px"
                            }
                        ]
                    });

延迟读取，自动绑定设置为 false。

dataSource.read();

这是我简化的控制器操作。它运行并获取数据，并且适用于我的 MVC 包装器网格。

    [Route("LeagueDetailGroup_Read/{_leagueTypeId:int}")]
    public ActionResult LeagueDetailGroup_Read([DataSourceRequest]DataSourceRequest request, int _leagueTypeId = -1)
    {
       DataSourceResult result =
           _unitOfWork.FSMDataRepositories.LeagueDetailGroupRepository.Get(
               ld => ld.LeagueTypeId == _leagueTypeId
               )
        .ToDataSourceResult(request,
            ld => new LeagueDetailGroupViewModel
        {

            LeagueDetailGroupId = ld.LeagueDetailGroupId,
            LeagueTypeId = ld.LeagueTypeId,
            GroupName = ld.GroupName,
            DateCreated = ld.DateCreated,
            DateLastChanged = ld.DateLastChanged
        }
        );
        // data looks fine here
        return Json(result, JsonRequestBehavior.AllowGet);
    }

目前我遇到这个错误：

Uncaught TypeError: e.slice is not a function
    at init.success (kendo.all.js:6704)
    at success (kendo.all.js:6637)
    at Object.n.success (kendo.all.js:5616)
    at i (jquery-3.1.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.1.1.min.js:2)
    at A (jquery-3.1.1.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-3.1.1.min.js:4)

Answer 1

如果不进行测试很难知道，但让我知道这是如何工作的。

更改您的控制器，以便您只返回一个 json 字符串。另外，尝试删除架构和参数映射，并将 dataType 设置为 json:

var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "@Url.Action("LeagueDetailGroup_Read", "Configuration")?_leagueTypeId=" + leagueTypeId,
                dataType: "json"
            }
        }
});

对于网格，我发现简单的 json 数据通常不需要 schema/model 定义。 Kendo 非常烦人且难以调试。让我知道进展如何。

Answer 2

根据我的经验，当您在某处有一个包含空值的记录时，会发生 e.slice 错误。 kendo 网格不够智能来处理这个问题，因此您要么必须确保您的数据源 returns 空字符串而不是字符串字段的空值，要么将客户端模板放在翻译null 变成一个空字符串。 kendo todatasourceresult 可能使问题暴露出来。请注意，这通常是返回数据集之前的最后一步，因为它可以修改实体查询以进行分页，因此您永远不会查询超过一页的数据（对于 ajax 网格）。

Kendo UI 网格 Javascript 数据源调用控制器操作

Kendo UI Grid Javascript datasource call to controller action

javascript

telerik

kendo-ui

kendo-grid

kendo-datasource