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

【问题标题】：Kendo UI: How to bind Kendo UI hierarchical datagrid detailInit event using MVVM (data-attribute)Kendo UI：如何使用 MVVM（数据属性）绑定 Kendo UI 分层数据网格 detailInit 事件
【发布时间】：2017-07-11 06:08:56
【问题描述】：

我正在使用 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（剑道模板）：

<!-- 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>

【问题讨论】：

标签： mvvm kendo-ui kendo-grid kendo-mvvm kendo-template

【解决方案1】：

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

在这个问题上，来自 Telerik 的工程师断言：

所有剑道小部件都可以通过data attributes 进行配置。建立一个也支持声明式分层网格，但是请请记住：detailInit 事件不应通过事件绑定绑定，但通过数据属性。

Here is the example了解如何完成事件绑定。

使用MVVM（数据属性是）使用data-detail-init将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>

【讨论】：