Knockout-kendo KendoUI Grid Сортировка по введенному значению в ячейке сетки

У меня есть сетка KendoUI, которая определена в моем коде с помощью плагина Knockout-Kendo следующим образом. Важно отметить, что количество столбцов этой сетки меняется в зависимости от json, полученного с сервера.

<script type="text/html" id="grid">
    <div class="grid-input input" data-bind="kendoGrid:
    {
        data: RowList,
        columns: ko.toJS(GridHeader.ColumnDefinitionList),
        rowTemplate: 'kendoui-grid-row',
        altRowTemplate: 'kendoui-alt-grid-row',
        useKOTemplates: true,
        scrollable: false,
        pageable: { pageSize: 10 },
        sortable: true
    }"></div>
</script>

<script type="text/html" id="kendoui-grid-row">
    <tr data-bind="visible: IsDeleted() == false, template: { name: 'grid-row' }"></tr>
</script>

<script type="text/html" id="kendoui-alt-grid-row">
    <tr data-bind="visible: IsDeleted() == false, template: { name: 'grid-row' }" class="k-alt"></tr>
</script>

<script type="text/html" id="grid-row">
    <td><div class="grid-button delete-row-button"><span class="icon-delete"></span></div></td>
    <!-- ko foreach: CellList -->
    <td data-bind="template: { name: Input.Type, data: Input }">
    </td>
    <!-- /ko -->
</script>

<script type="text/html" id="text">
    <input class="text-input input k-textbox" data-bind="value: Value" />
</script>

В этом случае у меня есть сетка, заполненная текстовыми полями (в каждой ячейке сетки есть ввод текста). Теперь моя проблема заключается в том, что сортировка по щелчку заголовков сетки ничего не делает, даже если во входных данных есть тексты. Что я хотел бы сделать, так это определить цель сортировки. В этом случае это будет значение ввода внутри ячеек сетки.


kendo-grid kendo-ui knockout-kendo
person Zwik    schedule 23.04.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я столкнулся с подобной проблемой некоторое время назад. Проблема заключалась в том, что сетка кендо плохо работает с наблюдаемыми ко. В качестве обходного пути вы можете создать вычисление, которое возвращает данные в виде простого объекта JS:

this.RowList.asJS = ko.computed(function() {
    return ko.toJS(this.RowList());
}, this);

Затем измените data: RowList на следующее:

data: RowList.asJS

Однако это означает, что вы теряете наблюдаемые в своих шаблонах строк. Обходной путь для этого состоит в том, чтобы снова получить исходный объект внутри вашей строки.

Сначала создайте вспомогательную функцию для быстрого получения элемента по идентификатору (при условии, что у вас есть свойство Id):

this.RowList.getById = function(id) {
    return ko.utils.arrayFirst(this.RowList(), function(row) {
         return ko.unwrap(row.Id) === id;
    });
}, this);

Теперь вы можете вызвать getById внутри ваших шаблонов строк:

<script type="text/html" id="kendoui-grid-row">
    <!-- ko with: $root.RowList.getById(Id) -->
        <tr data-bind="visible: IsDeleted() == false, template: { name: 'grid-row' }"></tr>
    <!-- /ko -->
</script>
person sroes    schedule 28.04.2014