web-dev-qa-db-ja.com

プログラムによるグリッドの並べ替えの設定

KendoUI DataSourceの並べ替えパラメーターをプログラムで設定してからデータを読み取り、2番目のサーバーでの読み取りを回避することは可能ですか？スコープは、特定のユーザーインタラクションでデフォルトのソートを設定することです。どうやって？

答えが要点に達していないため（または、物事がどのように機能するのか理解していないため）、これが私がやろうとしている例です。

最初のソートでKendo DataSourceを定義します。

var datasource = new kendo.data.DataSource({
    parameterMap: function (inputParams, operation) {
        return JSON.stringify(inputParams)
    },
    // default sort
    sort: [
        {field: "field_1", dir: "asc"},
        {field: "field_2", dir: "asc"}
    ]
});

このデータソースは剣道グリッドにバインドされています：

var grid = $("element").kendoGrid({
    dataSource: datasource   
});

次に、DataSourceの「読み取り」を呼び出し、グリッドにデータの最初のページを入力するボタンがあります。

$("#btn").bind("click", function(e) {
    datasource.page(1);
});

このように、ボタンをクリックすると、ユーザーは「field_1」と「field_2」で並べられたデータを取得し、グリッドは列ヘッダーにこの並べ替えを表示します。次に、ユーザーは、列ヘッダーをクリックすることにより、任意の方法でデータを並べ替えることができます。

私がやりたいことは、DataSource宣言で定義されているように、デフォルトのソートを最初のソートにリセットし、列ヘッダーに再度表示し、新しいDataSourceを再度作成しないことです。

何かのようなもの：

$("#btn").bind("click", function(e) {
    datasource.sort = [
        {field: "field_1", dir: "asc"},
        {field: "field_2", dir: "asc"}
    ]; 
    datasource.page(1);
});

提供された解決策はポイントに達していないようです（それでも、それほど簡単ではないように思われ、フレームワークで対処する必要がある正当な質問に対して、なぜ評判ポイントを失うのかわかりません）。

私が間違っていることを教えてください（評判を失う心配はありません-問題を解決する方法を理解したいだけです）。

sortingdatasourcekendo-ui
15
Matteo Piazza
var kendoGrid = $("#grid").data('kendoGrid');
var dsSort = [];
dsSort.Push({ field: "fieldName1", dir: "asc" });
dsSort.Push({ field: "fieldName2", dir: "desc" });
kendoGrid.dataSource.sort(dsSort);
30
Nanetxe

はい。 sort 設定で可能です。

2
Atanas Korchev

ここにあなたが正確に何を求めているのかについてのjsfiddleがあります： http://jsfiddle.net/MechStar/c2S5d/

簡単に言えば、最初にdataSourceをnullに設定し、ユーザーから必要な入力を受け取ったときにdataSourceを挿入する必要があります。

myKendoGrid.data（ "kendoGrid"）。setDataSource（getKendoDataSource（ "ShipName"、 "asc"））;

var getKendoDataSource = function (sidx, sord) {
  return new kendo.data.DataSource({
    type: "odata",
    transport: {
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    pageSize: 10,
    serverPaging: true,
    serverSorting: true,
    sort: {
      field: sidx ? sidx : "",
      dir: sord ? sord : ""
    }
  });
};
var myKendoGrid = $("#grid").kendoGrid({
  columns: [
    { field: "OrderID" },
    { field: "ShipName" },
    { field: "ShipCity" }
  ],
  dataSource: null,
  pageable: {
    pageSizes: [10, 20, 50, 100, 200]
  },
  resizable: true,
  scrollable: false,
  sortable: {
    allowUnsort: false
  }
});
$("#link").click(function () {
  myKendoGrid.data("kendoGrid")
    .setDataSource(getKendoDataSource("ShipName", "asc"));
});
2
MechStar

最初にデータを読み取る前にソートを設定したいですか？ UIコントロールでautobind：falseが設定されていることを確認してから、データソースで並べ替えプロパティを設定し、並べ替えられたデータを取得する準備ができたらdatasource.read（）を呼び出します。

1
Robin Giltner

私はあなたが何を達成しようとしているのか知っています。ユーザーの並べ替えとフィルタリング（私の場合はクライアント側）を保存しており、他の理由でグリッド関数getOptions/setOptionsを使用できないため、同じことをしなければなりませんでした。 autobind：falseを設定しても、autobindの定義が表示されている場合、これは期待どおりに機能しません。

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-autoBind

falseに設定されている場合、ウィジェットは初期化中にデータソースにバインドしません。この場合、データソースの変更イベントが発生すると、データバインディングが発生します。デフォルトでは、ウィジェットは構成で指定されたデータソースにバインドします。

dataSource.sort（）を実行すると、これによってchangeイベントが発生し、次にreadがdataSourceで暗黙的に実行されます（そのため、 2番目のサーバーの読み取りがあります）。

したがって、必要なことは、必要な並べ替えオプションを使用して新しいdataSourceを作成し、dataSource.read（）を明示的に呼び出すことです。

例（デフォルトのオプションを拡張して、構成を繰り返さないようにすることができます）：

var options = $.extend({}, dataSourceOptions);
options.sort = [
        {field: "field_1", dir: "asc"},
        {field: "field_2", dir: "asc"}
    ];
var dataSource = new kendo.data.DataSource(options);
grid.setDataSource(dataSource);
grid.dataSource.read();

この助けを願っています。よろしく！

1
Gabriel C