Сортировка и фильтрация не работают в нокаутной сетке кендо

Я использую Knockout-Kendo.js, и у меня не было проблем с привязкой данных к сетке и просмотром изменений при изменении наблюдаемого массива.

тем не мение

  1. Сортировка не работает и ошибок js нет.

Обратите внимание, что tasks является ko.observableArray()

        <div data-bind="kendoGrid: {
                data: tasks,
                columns: [
                    { field: 'TaskId', title: 'Task Id' },
                    { field: 'Description', title: 'Description' },
                    { field: 'RaisedBy', title: 'Requested User' },
                    { field: 'Status', title: 'Status' },
                    { field: '', title: '' }
                ],
                rowTemplate: 'Template',
                useKOTemplates: true,
                editable: false,
                filterable: true,
                sortable: true,
                scrollable: false,
                pageable: {pageSize: 5 }
                }">
        </div>


<script id="Template" type="text/html">
    <tr>
        <td><div data-bind="text: TaskId"></div></td>
        <td><div data-bind="text: Description"></div></td>            
        <td><div data-bind="text: RaisedBy"></div></td>            
        <td><div data-bind="text: Status"></div></td>
        <td><button data-bind="click: $root.viewDetails">View</button></td>
    </tr>
</script>
  1. Фильтрация тоже не работает, и это то, что я вижу в консоли.

Uncaught TypeError: undefined не является функцией (анонимная функция) VM3445:3 o.filter kendo.web.min.js:11 o.process kendo.web.min.js:11 ct.extend.query kendo.web.min. js:11 ct.extend._query kendo.web.min.js:11 ct.extend.filter kendo.web.min.js:11 g.extend.filter kendo.web.min.js:19 g.extend._submit kendo.web.min.js:19 b.extend.proxy.b.isFunction.i jquery-1.9.1.js:7223 b.event.dispatch jquery-1.9.1.js:9593

JSfiddle — http://jsfiddle.net/fc0ukq9o/

Я обнаружил, что JSFiddle работает без проблем с наблюдаемым массивом.

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

$.each(data.source, function (index, data) {
                    self.tasks.push(ko.mapping.fromJS({
                        TaskId: data.TaskId,
                        Description: data.Description,
                        RaisedBy: data.RaisedBy,
                        Status: data.Status
                    }));
                });

kendo-grid kendo-ui knockout.js knockout-kendo
person Gopalakrishnan SA    schedule 14.08.2014    source источник
comment
Я не вижу ничего плохого в том, что у вас есть. Можете ли вы опубликовать свою модель представления и примеры данных или воспроизвести проблему на jsfiddle?   -  person Tanner    schedule 14.08.2014
comment
Спасибо за ваш ответ. Я обновил исходный вопрос с дополнительной информацией.   -  person Gopalakrishnan SA    schedule 14.08.2014
comment
ваш jsfiddle отлично работает здесь!   -  person Rahul Patil    schedule 14.08.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вау, это было сложно, но, кажется, я решил ее, см. демонстрацию.

Проблема с вашим подходом заключается в том, что Kendo ничего не знает о наблюдаемых нокаутах, а нокаут-кендо просто передает данные в виде простого JS-объекта в Kendo. Поэтому, если вы хотите иметь возможность изменять данные в своей таблице, вам следует использовать обходной путь. Мой подход заключался в использовании valueHasMutated метод, чтобы сообщить нокауту, что задача в массиве задач была обновлена.

Вот как выглядит модель представления:

function ViewModel() {
    var self = this;
    self.tasks = ko.observableArray();
    self.viewDetails = function(data) {
        alert(data.TaskId);
    };
    self.changeData = function() {
        self.tasks()[0].TaskId = 3;
        self.tasks.valueHasMutated(); // this will tell knockout that tasks were changed
    }
};

tasks — это наблюдаемый массив объектов Task:

function Task(id, description, raisedBy, status) {
    this.TaskId = id;
    this.Description = description;
    this.RaisedBy = raisedBy;
    this.Status = status;
};

Я также добавил метод инициализации с фиктивными данными:

ViewModel.prototype.init = function() {
    var self = this;
    var data = {
        source: [
            new Task(1, "Task 1", "User 1", "New"),
            new Task(2, "Task 2", "User 2", "Closed"),
            new Task(3, "Task 3", "User 3", "In progress"),
            new Task(4, "Task 4", "User 4", "New"),
            new Task(5, "Task 5", "User 5", "In progress")
        ]
    };
    self.tasks(data.source);
}

Итак, теперь сортировка работает как надо, и в случае изменения некоторых задач (нажатие кнопки «Изменить данные» в jsfiddle), таблица обновляется.

person Ilya Luzyanin    schedule 15.08.2014
comment
Вы тестировали это с большим массивом? valueHasMutated заставляет нокаут-кендо перезагружать источник данных, поэтому я ожидаю ловушку производительности! - person Rolf; 07.04.2016