Question

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

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

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

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>

Answer 1

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

在这个问题上，Telerik的一位工程师断言：

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

关于如何完成事件绑定的

Here is the example 。

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

<!-- 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事件（数据属性）

1 个答案: