將“所有”項添加到由遠程數據源填充的kendo ui列表視圖中

Question

我正在使用MVC 4，Web API和Kendo UI控件構建網站。

我在頁面上使用Kendo UI Listview過濾網格。 我試圖將“ ALL”選項添加為列表視圖中的第一項。

這是列表視圖 ：

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" }
            }
        });

我嘗試了幾種不同的方法來實現這一目標：

• 如果將它附加到按鈕上，則可以使它工作-但是在加載數據時需要在那兒使用它。
• 如果我將其添加到listview的dataBound事件中，它將導致databound事件進入循環並將該項目添加為一堆（IE）或殺死瀏覽器（firefox）。 添加preventDefault不會執行任何操作。
• 我已經閱讀了將函數添加到數據源的Read參數中的內容，但是我認為那不是正確的位置。

根據我的閱讀，我認為我應該能夠在listview的dataBound事件中進行操作，並且我的實現不正確。 這是添加了dataBound事件的listview，它使我的瀏覽器（Firefox）崩潰-或向listview（IE）添加了大約50個“所有”項目。

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 ，只需檢查它是否存在，如果不存在則僅添加：

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

作為對該問題的解釋，您正在創建一個無限循環，因為在數據源中插入元素將觸發change事件，並且列表視圖將再次刷新並綁定（從而觸發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);