1

MVC 4、Web API、Kendo UI コントロールを使用して Web サイトを構築しています。

私のページでは、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" }
            }
        });

これを実現するために、いくつかの異なる方法を試しました。

  • ボタンにアタッチすれば機能させることができますが、データが読み込まれるときに必要になります。
  • それをリストビューのdataBoundイベントに追加すると、 databoundイベントがループに陥り、項目を追加する (IE) か、ブラウザーを強制終了する (Firefox)。preventDefault を追加しても何も起こりませんでした。
  • データソースのReadパラメーターに関数を追加することについて読んだことがありますが、それは単に正しい場所ではないと思います。

私が読んだことに基づいて、リストビューの dataBound イベントでそれを行うことができるはずであり、実装が正しくないと思います。これは、ブラウザ (Firefox) をクラッシュさせる dataBound イベントが追加されたリストビューです。または、リストビュー (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({});
                }
            }
        });

どんな助けでも大歓迎です。

4

1 に答える 1

2

サーバー側に追加しないのはなぜですか？とにかく、でやりたい場合は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);
于 2014-04-30T17:23:20.373 に答える