MVC 包装器和常规 JavaScript Kendo 网格一起

Question

所以我试图将一个复杂的对象，一个列表，绑定到剑道网格的细节网格。我知道你不能这样做，所以我所做的是抓取数据并将其转换为 JSON 并将其用作我创建的这个网格的数据源。网格是这样创建的

@(Html.Kendo().Grid(Model).Name("Access")
  .Columns(columns =>
  {
   columns.Bound("ProjId").Width(220).Title("Project #");       
  }) 
  //I tried      
  .DetailTemplate("<div id=DetailTemplate'></div>")  
  // I also tried
  .ClientDetailTemplateId("<div id=DetailTemplate'></div>") 
  .Selectable()  
  .Events(events => events.DetailInit("initDetailGrid"))                                        
  .DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(false)                
   )
)

然后我的脚本中有这个

<script type="text/javascript"> 
function initDetailGrid(e) {       
    //Hide the grid header
    $(".k-grid tbody .k-grid .k-grid-header").hide();

   var grid = e.sender; 
   //Get the data from the selected record             
   var currentDataItem = grid.dataItem(grid.select()); 
    var newJsonObject = [];
    for (var i = 0; i < currentDataItem.taskId.length; i++) {
        var taskId = currentDataItem.taskId[i];
        newJsonObject.push({
            Id: objId,
            Interval: currentDataItem.InternalExternal[taskId],
           ....
        });
    }

    $("#DetailTemplate").kendoGrid({
        columns: [
            {field:"taskId", template:..stuff..},
            {field: "Interval", template: .. stuff..}                    
        ],           
        dataSource: newJsonObject
    });
}
</script>

所以基本上我想使用$("#DetailTemplate") 作为行的详细信息网格，但它不起作用，我不知道如何处理它。

编辑

我要做的是通过 javascript 创建一个 Kendo UI 网格，用作父 Grid 的详细模板，它是使用 ASP-MVC 帮助程序创建的。

Answer 1

目前尚不清楚您要达到的目标。你检查了层次结构演示here吗？

基本上，您需要在其中替换的只是直接填充数据源，而不是使用传输配置。

function detailInit(e) {
                    $("<div/>").appendTo(e.detailCell).kendoGrid({
                        dataSource: {
                              //via the data option of the dataSource
                            data: e.data.NestedArrayFeild
                        },
                        scrollable: false,
                        sortable: true,
                        pageable: true,
                        columns: [
                            { field: "OrderID", width: "70px" },
                            { field: "ShipCountry", title:"Ship Country", width: "110px" },
                            { field: "ShipAddress", title:"Ship Address" },
                            { field: "ShipName", title: "Ship Name", width: "200px" }
                        ]
                    });
                }