Добавить элемент "Все" в представление списка Kendo UI, заполняемое удаленным источником данных

Question

Я создаю веб-сайт с использованием MVC 4, веб-API и элементов управления Kendo UI.

На своей странице я использую Kendo UI Listview для фильтрации своей сетки. Я пытаюсь добавить опцию "ВСЕ" в качестве первого элемента в моем списке.

Вот список:

var jobsfilter = $("#jobfilter").kendoListView({
            selectable: "single",
            loadOnDemand: false,
            template: "<div class='pointercursor' id=${FilterId}>${FilterName}</div>",
            dataSource: filterDataSource,
            change: function (e) {
                var itm = this.select().index(), dataItem = this.dataSource.view()[itm];
                if (dataItem.FilterId !== 0) {
                    var $filter = new Array();
                    $filter.push({ field: "JobStatusId", operator: "eq", value: dataItem.FilterId });
                    jgrid.dataSource.filter($filter);
                } else {
                    jgrid.dataSource.filter({});
                }
            }
        });

Вот мой источник данных:

 var filterDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "api/Filter"
                }
            },
            schema: {
                model: { id: "FilterId" }
            }
        });

Я попробовал несколько разных способов, чтобы это произошло:

• Я могу заставить это работать, если я присоединяю это к кнопке - но мне это нужно там, когда данные загружаются.
• Если я добавляю его в событие dataBound списка, это приводит к тому, что событие, связанное с данными, попадает в цикл и добавляет элемент (IE) или убивает браузер (Firefox). Добавление warnDefault ничего не делало.
• Я прочитал о добавлении функции к параметру Read источника данных, но я думаю, что это просто неправильное место для этого.

Исходя из того, что я прочитал, я думаю, что я должен быть в состоянии сделать это в событии dataBound списка и что моя реализация неверна. Вот список с добавленным событием dataBound, который приводит к сбою моего браузера (Firefox) или добавляет около 50 элементов "Все" в список (IE).

var jobsfilter = $("#jobfilter").kendoListView({
            selectable: "single",
            loadOnDemand: false,
            template: "<div class='pointercursor' id=${FilterId}>${FilterName}</div>",
            dataSource: {
                transport: {
                    read: {
                        url: "api/Filter"
                    }
                }
            },
            dataBound: function (e) {
                var dsource = $("#jobfilter").data("kendoListView").dataSource;
                dsource.insert(0, { FilterId: 0, FilterName: "All" });
                e.preventDefault();
            },
            change: function (e) {
                var itm = this.select().index(), dataItem = this.dataSource.view()[itm];
                if (dataItem.FilterId !== 0) {
                    var $filter = new Array();
                    $filter.push({ field: "JobStatusId", operator: "eq", value: dataItem.FilterId });
                    jgrid.dataSource.filter($filter);
                } else {
                    jgrid.dataSource.filter({});
                }
            }
        });

Любая помощь будет принята с благодарностью.

Answer 1

Почему бы вам не добавить это на стороне сервера? Во всяком случае, если вы хотите сделать это в dataBoundпросто проверьте, существует ли он, и добавьте, только если его нет:

dataBound: function (e) {
    var dsource = this.dataSource;
    if (dsource.at(0).FilterName !== "All") {
        dsource.insert(0, {
            FilterId: 0,
            FilterName: "All"
        });
    }
},

В качестве объяснения проблемы, которую вы видите: вы создаете бесконечный цикл, так как вставка элемента в источник данных вызовет событие изменения, а представление списка обновится и снова свяжется (и, таким образом, вызовет dataBound).

Вы также можете инкапсулировать это в пользовательский виджет:

(function ($, kendo) {
    var ui = kendo.ui,
        ListView = ui.ListView;

    var CustomListView = ListView.extend({
        init: function (element, options) {
            // base call to widget initialization
            ListView.fn.init.call(this, element, options);

            this.dataSource.insert(0, {
                FilterId: 0,
                FilterName: "All"
            });
        },

        options: {
            name: "CustomListView"
        }
    });

    ui.plugin(CustomListView);
})(window.jQuery, window.kendo);