Kendo UI Grid Javascript 数据源调用控制器动作

Question

我在将我的 JavaScript kendo ui 网格绑定到来自动作方法的模型数据时遇到问题。我看到的所有示例大多都是 MVC 包装器，JavaScript 示例各不相同，似乎没有一个适合我。

这是我在下面的位置。

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

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 数据通常不需要定义模式/模型。剑道超级烦人且难以调试。告诉我进展如何。

Answer 2

根据我的经验，当您有一条记录在某处具有空值时，就会发生 e.slice 错误。 kendo 网格并没有足够智能来处理这个问题，因此您要么必须确保数据源返回空字符串而不是字符串字段的空值，要么将客户端模板放在将空值转换为空字符串的列上。剑道到数据源结果可能使问题暴露出来。请注意，这通常是返回数据集之前的最后一步，因为它可以修改实体查询以提供分页，因此您永远不会查询超过一页的数据（对于 ajax 网格）。