未捕獲TypeError：無法讀取未定義變量的屬性'set'masterRow在KendoUI中未定義Grid detailInit

Question

我發佈了一個問題，其他人得到了答案，my answered question，我很感謝，我修改了我的代碼以匹配其他成員代碼，他在Telerik的道場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" } 
     ] 
    }); 
} 

關於爲什麼它未來定義的任何想法？

Answer 1

你的邏輯很好......但由於某種原因，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" } 
     ] 
    }); 
}