剣道UI：剣道UI階層データグリッドをバインドする方法MVVM（データ属性）を使用してdetailInitイベント

Question

私は剣道UIを使用して階層型データグリッドを構築していますが、私はウィジェットバインディングのMVVM方法論を使用しています。 私が作ろうとしている階層的なグリッドの種類はDEMOです。しかし、ここの例ではMVVMではなくjQueryを使用しています。

detailInitイベントをviewModelにバインドするには、MVVMを使用してdataの属性を使用しますか？

私は以下のコードを使用してイベントをバインドしたいが、それは動作していない：

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経由で設定することができます。 階層グリッドを宣言的に構築することもサポートされていますが、 に注意してください。detailInitイベントは、イベント バインディングではなくデータ属性を介してバインドされるべきではありません。結合事象を達成することができる方法の

Here is the example。

MVVM（データattibuteである）を用いて以下のようにdata-detail-initを用いviewModelにdetailInitイベントを結合するための正しい方法：

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