Kendo UI：如何使用 MVVM（数据属性）绑定 Kendo UI 分层数据网格 detailInit 事件

Question

我正在使用 Kendo UI 构建分层数据网格，并且我正在使用 MVVM 方法进行小部件绑定。这是我想要制作的那种层次网格的DEMO。但是这里的示例使用 jQuery 而不是 MVVM。

如何使用 MVVM 使用 data 属性将 detailInit 事件绑定到我的 viewModel？

我想使用以下代码绑定事件，但它不起作用：

JS:

var viewModel = kendo.observable({
    ......
    ..........
    dataGridDetailInit: function (e) {
        //Here I want to catch the detailInit event of the dataGrid
    },
    ..........
    ......
});

HTML（Kendo 模板）：

<!-- Datagrid -->
<div data-role="grid" 
    data-columns="[
        {'field':'FullName', 'title':'Full Name'},
        {'field':'Email', 'title':'Email'},
        {'field':'HomeTel', 'title':'HomeTel'},
        {'field':'Mobile', 'title':'MobileTel'},
        {'field':'Contact_Type', 'title':'Contact Type'},

    ]" 
    data-bind ="source: address_book_datagrid_observable.datasource,
                events: { 
                    detailInit: dataGridDetailInit 
                }" 
    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"
    }'
    >
</div>

Answer 1

好的，所以在研究时我遇到了 this link。

关于这个问题，Telerik 的一位工程师断言：

All Kendo widgets can be configured via data attributes. Building a hierarchical grid declaratively is supported too, however please have in mind that: detailInit event should not be bound through the events binding but via data-attribute.

Here is the example 如何实现事件绑定。

使用 data-detail-init 使用 MVVM 将 detailInit 事件绑定到 viewModel 的正确方法（数据属性是），如下所示：

<!-- Datagrid -->
<div data-role="grid" 
    data-columns="[
        {'field':'FullName', 'title':'Full Name'},
        {'field':'Email', 'title':'Email'},
        {'field':'HomeTel', 'title':'HomeTel'},
        {'field':'Mobile', 'title':'MobileTel'},
        {'field':'Contact_Type', 'title':'Contact Type'},

    ]" 
    data-bind ="source: viewModel.datasource" 
    data-detail-init="viewModel.dataGridDetailInit"
    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"
    }'
    >
</div>

Kendo UI：如何使用 MVVM（数据属性）绑定 Kendo UI 分层数据网格 detailInit 事件

Kendo UI: How to bind Kendo UI hierarchical datagrid detailInit event using MVVM (data-attribute)

mvvm

kendo-ui

kendo-grid

kendo-mvvm

kendo-template