web-dev-qa-db-ja.com

KendoUI：ボタンクリック後にグリッドデータを最初のページにリセット

次のシナリオがあります。

私のページには、データソースにバインドされたグリッド（ページ付けあり）があります。 [抽出]ボタンをクリックすると、グリッドにデータが入力されます（Webサービスを介してページ付けされたデータを読み取ります）。次に、グリッドページネーションを使用して「ページ2」を選択します。この場合も、データを返すためにWebサービスが呼び出されます。

今：もう一度「抽出」をクリックして、最初のページにデータを再読み込みして表示したいと思います。どちらが最善の方法かわかりません。

（入力パラメーターを使用して）サービスを1回だけ呼び出し、グリッドのページ付けインデックスをリセットしたいと思います。

現在、次のコードを使用しています。

$("#btnExtract").bind("click", function(e) {
    var grid = $("#section-table").data("kendoGrid");
    grid.dataSource.read( {parameter: "value"} );
    grid.dataSource.page(1);
});

ただし、実際にはサービスを2回呼び出します。

kendo-uikendo-grid
14
Matteo Piazza

サーバー側のページングを実行している場合は、grid.dataSource.page(1)を実行するだけで十分です。これにより、すでに認識しているとおりにreadが呼び出されます。

19
OnaBai

何らかの理由で、ページが1に設定されていて、もう一度1に設定すると、読み取りが行われます。 1以外の場合、1に設定すると、そのページに移動し、読み取りは行われません。したがって、質問に答えるには、次のコードを使用できます。

if (grid.dataSource.page() != 1) {
   grid.dataSource.page(1);
}
grid.dataSource.read( {parameter: "value"} );
17
Daniel Lorenz

単一のリクエストのみを実行するには、dataSourceのqueryメソッドを使用する必要があります。フィルタ/ページ/並べ替えなどのさまざまな方法の組み合わせを作成できます。

例えば：

dataSource.query({ page: 5, pageSize: 20, sort: { field: "orderId", dir: "asc" } });
5
Petur Subev

DataSource.query（）メソッドを使用して、ページ番号とカスタム入力パラメーターを渡します。

$("#btnExtract").bind("click", function(e) {
    var grid = $("#section-table").data("kendoGrid");
    grid.dataSource.query( { page: 1, parameter: "value"} );
});

サーバー側のページングと並べ替えを使用している場合は、その情報も含める必要がある場合があります。

$("#btnExtract").bind("click", function(e) {
    var grid = $("#section-table").data("kendoGrid");

    var queryParams = {
        page: 1,
        pageSize: grid.dataSource.pageSize(),
        sort: grid.dataSource.sort(),
        group: grid.dataSource.group(),
        filter: grid.dataSource.filter(),
        parameter: "value"
    };

    grid.dataSource.query(queryParams);
});
3
Mathew Leger

Kendoグリッドのデータソース読み取り操作のparameterMapを定義します。これは、以下に示すようにトランスポート要素に入ります。次に、grid.dataSource.page（1）を呼び出します。これにより、readが呼び出され、ソートする必要があります。

   new kendo.data.DataSource({      
transport: {
                   read: {
                          // ur read
                          },
           parameterMap: function (o, operation) {
                         var output = null;
                         switch (operation) {
                                    case "create":
                                    break;
                                case "read":
                                    output =  {parameter: "value"};
                                    break;
                                case "update":
                                    break;
                                case "destroy":
                                    break;
                        }
                     return output;             }}});
0
Vojtiik