未捕获的TypeError:无法读取属性' set'未定义变量masterRow在KendoUI Grid detailInit中未定义

时间:2016-01-21 22:56:38

标签: jquery asp.net-mvc kendo-ui kendo-grid

我发布了另一个问题并得到了回答,my answered question,我很感激,我修改了我的代码以匹配他在Telerik Dojo Heres a dojo中设置的其他成员代码 一切都很好,直到我到达

var masterRow = masterGrid.dataSource.get(groupID);

多数民众赞成在哪里,我将它定义为未定义,我不知道为什么......我的完整代码是

function onSelectedRowClick(e) {
    var catalogGrid = $("#CatalogGrid").data("kendoGrid");
    var selectedID = catalogGrid.dataItem(catalogGrid.select());
    var theID = selectedID.globalGroupID;
    myID = theID;
    groupID = myID;
}

var myID;

// #region Catalog Grid

var groupID;

function TheCatalogGrid(catalogData) {
    $("#CatalogGrid").kendoGrid({
        dataSource: {
            data: catalogData
        },
        schema: {
            model: {
                id: "globalGroupID",
            }
        },

        columns: [
           { field: "globalGroupLevel", title: "globalGroupLevel", hidden: true },
           { field: "globalGroupName", title: "Group Name", width:350 },
           { field: "isRequired", title: "*", width:20 },
           { field: "optionName", title: "Option Name" },
           { title: "Description" },
           { title: "Price" }
        ],

        change: function (e) {
            onSelectedRowClick();
        },
        scrollable: true,
        pageable: false,
        selectable: "row",
        height: 500,
        dataBound: function (e) {
            var data = this.dataSource.data();
            $.each(data, function (i, row) {
                if (row.get("globalGroupLevel") == 0) {
                    var element = $('tr[data-uid="' + row.uid + '"] ');
                    element.addClass("colored-row");
                }
            });
        },
        detailInit: detailInit,
        detailExpand: function(e){
            groupID = this.dataItem(e.masterRow).get("globalGroupID");
        },
    });
}
function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            transport: {
                read: URLParams.GetTheGlobalGroupOptions + "?id=" + groupID
            },
        },
        scrollable: false,
        selectable: "row",
        filter: { field: "GlobalGroupID", operator: "eq", value: e.data.globalGroupID },
        change: function (e) {
            // get detail row
            var detailRow = this.dataItem(this.select());
            var optionName = detailRow.get("OptionName") // Change this stuff to populate into the correct columns

            // get master row
            var masterGrid = $("#CatalogGrid").getKendoGrid();
            var masterRow = masterGrid.dataSource.get(groupID);

            // set 'Option Name' value to master row 'optionName' field
            masterRow.set("optionName", optionName);

        },
        columns: [
            { field: "OptionName", title: "Option Name" },
            { field: "OptionDescription", title: "Description" },
            { field: "OptionPriceComment", title: "Price" }
        ]
    });
}

关于它为何未定义的任何想法?

1 个答案:

答案 0 :(得分:0)

您的逻辑很好......但出于某种原因,dataSource.get似乎没有正确搜索指定的groupID。您可以使用grid.dataItem作为解决方案。

首先,确保提供给主网格的数据具有dataSource列中定义的optionName属性(不确定它是否真的重要,但我将其添加到您的Dojo example只是为了制作肯定)。

要改变的第二件事是你的detailInit功能。该函数将接收e.masterRow作为参数,因此您不必在主网格中搜索以获取链接的masterRow。但是,请确保detailInit中的e变量不会与更改函数的e变量发生冲突,方法是重命名其中一个变量,或者像我在以下示例中所做的那样保留引​​用:

function detailInit(e) {
    var masterRow = e.masterRow; //Keep a reference to your masterRow to avoid conflict with change... you could also use a different name
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: [{ OptionName: "Delivery"}, {OptionName: "PickUp"}],
        scrollable: false,
        selectable: "row",
        filter: { field: "globalGroupID", operator: "eq", value: e.data.globalGroupID },
        change: function (e) {
            var detailRow = this.dataItem(this.select());
            var optionName = detailRow.get("OptionName") // Change this stuff to populate into the correct columns

            //Use the masterRow directly to get the dataItem from the master grid
            $("#grid").getKendoGrid().dataItem(masterRow).set("optionName", optionName);
        },
        columns: [
            { field: "OptionName", title: "Option Name" },
            { field: "OptionDescription", title: "Description" },
            { field: "OptionPriceComment", title: "Price" }
        ]
    });
}