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();

这是我简化的Controller操作。它运行并获取数据，并且适用于我的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网格不够智能，无法解决此问题，因此您必须确保数据源返回空字符串而不是字符串字段为null，或者将客户端模板放在将null转换为空字符串的列上。 kendo todatasourceresult可能使问题暴露出来。请注意，这通常是返回数据集之前的最后一步，因为它可以修改实体查询以进行分页，因此您查询的数据永远不会超过单个页面（对于ajax网格）。

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

2 个答案: