Пользовательский интерфейс Kendo: как связать шаблон Grid/Detail при использовании иерархической сетки данных с использованием MVVM (атрибут данных)

Я создаю иерархическую сетку данных с использованием пользовательского интерфейса Kendo и использую методологию MVVM для привязки виджетов.

Вот ДЕМО иерархического сетка хочу сделать. Но в этом примере используется jQuery, а не MVVM.

Как связать шаблон сведений для строка сведений с использованием атрибутов данных с использованием MVVM?

Я попытался связать detailTemplate, используя приведенный ниже код, но он не работает:

JS:

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

HTML (шаблон кендо):

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

data-binding kendo-grid kendo-ui kendo-mvvm kendo-template
person Rahul Gupta    schedule 12.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Наконец, вот как я это сделал:

Я удалил detailTemplate из viewModel и создал раздел шаблона в файле представления и связал его с идентификатором шаблона, используя data-detail-template="data_grid_row_detail_template"

Вот мой окончательный код:

JS:

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

HTML (шаблон кендо):

<!-- 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>
person Rahul Gupta    schedule 12.07.2017