Question

所以我试图将一个复杂的对象，一个列表绑定到Kendo网格的细节网格。我知道你不能这样做，所以我所做的就是获取数据并将其转换为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网格，用作使用ASP-MVC帮助程序创建的父网格的详细模板。

Answer 1

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

基本上你需要替换它的所有东西就是直接填充dataSource而不是使用传输配置。

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" }
                        ]
                    });
                }

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

1 个答案: