具有本地數據的分層Kendo網格

Question

如何使用本地數據創建分層劍道網格？我有一個「主」格如下：

<section id="master-item"> 
    <div class="panel"> 
       @(Html.Kendo().Grid<TheViewModel>() 
      .Name("dealerFacilitySchedules") 
      .DataSource(data => data 
       .Ajax() 
       .Model(model => model.Id(p => p.FacilityScheduleId)) 
       .ServerOperation(false) 
      ) 
      .BindTo(Model.FacilitySchedules) 
      .Columns(columns => 
      { /* colums definition */ 
      }) 
      /* other staff */ 
      .ClientDetailTemplateId("slave-item") 
     ) 
    </div> 
</section> 

我不知道怎麼去「從」項目的定義。如何提取BindTo方法中的物品ID？

<script id="slave-item" type="text/kendo-tmpl"> 
    @(Html.Kendo().Grid<TheSlaveItemViewModel>() 
      .Name("dealerFacilitySchedule#=Id#") 
      .DataSource(data => data 
       .Ajax() 
       .Model(model => model.Id(p => p.FacilityScheduleItemId)) 
       .ServerOperation(false) 
      ) 
      .BindTo(Model.FacilitySchedules[ **How to add templated ID here??** ]) 
      .Columns(columns => 
      { /* definition of columns */ 
      }) 
      /* other config */ 
      .ToClientTemplate() 
    ) 
</script> 

Answer 1

Tthis是描述從父網格獲取值的語法的代碼片段。它的調用由當前機遇

.DataSource(dataSource => dataSource 
    .Ajax() 
    .Read(read => read.Action("GetDetailsAll", "Order", new { opportunityId = "#=OpportunityId#" })) 

父行OppId通過#=OpportunityId#

Answer 2

稱爲填充與數據模型如果有人仍有意在該主題的操作方法我還沒有找到如何使用ASP.NET包裝解決問題。然而，也可以使用純HTML和JS來解決這個問題，具體如下：

<section id="root-grid"> 
    <div class="panel"> 
     <div class="grid"></div> 
    </div> 
</section> 

<script type="text/x-kendo-template" id="slave-template"> 
    <div class="panel"> 
     <div class="grid"></div> 
    </div> 
</script> 

<script type="text/javascript"> 
    $(function() { 
     var data = @Html.Raw(Json.Encode(Model.FacilitySchedules)); 
     var columns = [ 
      makeKendoColumn("ValidFrom", "@Resources.DealerFacility_ValidFrom", "{0:d}", "date"), 
      // other columns 
     ]; 
     var detailColumns = [ 
      // as above - columns definition 
     ]; 

     OnRootScheduleGridInitialize(
      data, 
      columns, detailColumns, 
      $('#root-grid').find('.grid')); 
    }); 
</script> 

腳本：

function OnRootScheduleGridInitialize(dataObject, columnsDefinition, subGridColumnsDefinition, $node) { 
    $node.kendoGrid({ 
     dataSource: { 
      data: dataObject, 
      schema: { 
       model: { 
        fields: { 
         // root model fields definition 
        } 
       } 
      }, 
      pageSize: 20 
     }, 
     scrollable: true, 
     sortable: true, 
     pageable: { 
      input: true, 
      numeric: false 
     }, 
     columns: columnsDefinition, 

     detailTemplate: kendo.template($("#slave-template").html()), 
     detailInit: OnDetailsScheduleInitializeFactory(subGridColumnsDefinition), 
    }); 
} 

function OnDetailsScheduleInitializeFactory(columnsDefinition) { 
    return function (e) { 
     var $row = e.detailRow; 

     $row.find('.grid').kendoGrid({ 
      dataSource: { 
       data: e.data.FacilityScheduleItems, 
       schema: { 
        model: { 
         fields: { 
          // slave object model fields definition 
         } 
        } 
       }, 
       pageSize: 20 
      }, 
      scrollable: true, 
      sortable: true, 
      pageable: { 
       input: true, 
       numeric: false 
      }, 
      columns: columnsDefinition, 
     }); 
    }; 
} 

function makeKendoDateColumn(columnName, columnLabel) { 
    return makeKendoColumn(columnName, columnLabel, 'd', 'date'); 
} 

function makeKendoNumericColumn(columnName, columnLabel) { 
    return makeKendoColumn(columnName, columnLabel, 'n', 'number'); 
} 

function makeKendoGenericColumn(columnName, columnLabel) { 
    return { 
     field: columnName, 
     title: columnLabel, 
     width: '100px', 
    }; 
} 

function makeKendoColumn(name, label, format, attrClass) { 
    var maker = function (n, l, f, c) { 
     var result = { 
      width: '100px' 
     }; 
     n(result); 
     l(result); 
     f(result); 
     c(result); 
     return result; 
    } 

    var nameDec = function (r) { r.field = name; }; 
    var labelDec = function (r) { r.title = label; }; 
    var attrDec = function() { }; 
    var formatDec = function() { }; 

    if (attrClass) { 
     attrDec = function (r) { r.attributes = { "class": attrClass }; }; 
     formatDec = function (r) { r.format = format; }; 
    } 
    else { 
     if (format) { 
      attrDec = function (r) { r.attributes = { "class": attrClass }; }; 
     } 
    } 

    return maker(nameDec, labelDec, formatDec, attrDec); 
} 

如果您有任何其他的解決方案，請與大家共享。