Kendo UI：使用 MVVM（数据属性）使用分层数据网格时如何绑定 Grid/Detail 模板

Question

我正在使用 Kendo UI 构建分层数据网格，并且我正在使用 MVVM 小部件绑定方法。

Here is the DEMO 我想制作的那种分层网格。但是这里的示例使用 jQuery 而不是 MVVM。

如何使用 MVVM 使用数据属性绑定 detail template 明细行？

我尝试使用以下代码绑定 detailTemplate，但它不起作用：

JS:

var viewModel = kendo.observable({
    ......
    ..........
    gridDetailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>",
    ..........
    ......
});

HTML（Kendo 模板）：

<!-- Datagrid -->
<div data-role="grid" 
    data-columns="[
        {'field':'FullName', 'title':'Full Name'},
        {'field':'Gender', 'title':'Gender'},
        {'field':'Email', 'title':'Email'},
        {'field':'HomeTel', 'title':'HomeTel'},
        {'field':'Mobile', 'title':'MobileTel'},
    ]" 
    data-bind ="source: viewModel.datasource" 
    data-detail-init="viewModel.getGridRowDetailData"
    data-pageable='{
                    refresh: false,
                    pageSizes: true,
                    buttonCount: 5,
                }'
    data-navigatable = "true"
    data-resizable = "true"
    data-no-records= "true"
    data-messages = '{
        noRecords: "There is no data to be displayed"
    }'
    data-detail-template="viewModel.gridDetailTemplate"
    >
</div>

Answer 1

最后，我是这样完成的：

我从 viewModel 中删除了 detailTemplate 并在视图文件中创建了一个模板部分，并使用 data-detail-template="data_grid_row_detail_template"

将其与模板 ID 绑定

这是我的最终代码：

JS:

var viewModel = kendo.observable({
    ......
    ..........
    //no need of the below line here
    //gridDetailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>",
    ..........
    ......
});

HTML（Kendo 模板）：

<!-- Datagrid -->
<div data-role="grid" 
    data-columns="[
        {'field':'FullName', 'title':'Full Name'},
        {'field':'Gender', 'title':'Gender'},
        {'field':'Email', 'title':'Email'},
        {'field':'HomeTel', 'title':'HomeTel'},
        {'field':'Mobile', 'title':'MobileTel'},
    ]" 
    data-bind ="source: viewModel.datasource" 
    data-detail-init="viewModel.getGridRowDetailData"
    data-pageable='{
                    refresh: false,
                    pageSizes: true,
                    buttonCount: 5,
                }'
    data-navigatable = "true"
    data-resizable = "true"
    data-no-records= "true"
    data-messages = '{
        noRecords: "There is no data to be displayed"
    }'
    data-detail-template="data_grid_row_detail_template"
    >
</div>

<!-- Detail template -->
<script type="text/x-kendo-template" id="data_grid_row_detail_template">
    <div>Name: #: name #</div><div>Age: #: age #</div>
</script>

Kendo UI：使用 MVVM（数据属性）使用分层数据网格时如何绑定 Grid/Detail 模板

Kendo UI: How to bind Grid/Detail template when using hierarchical datagrid using MVVM (data-attribute)

data-binding

kendo-ui

kendo-grid

kendo-mvvm

kendo-template