Programmatically setting grid sort

Question

Is it possible to programmatically set the sort parameter of a KendoUI DataSource before reading data and avoiding a second server reading? The scope is setting a default sort on a certain user interaction. How?

Here is an example of what I am trying to do, because the answers are not getting to the point (or maybe I am not understanding how things work).

I define a Kendo DataSource with an initial sort:

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

This DataSource is bound to a Kendo grid:

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

Then I have a button that calls a "read" on the DataSource and populates the grid with the first page of data:

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

This way, after clicking the button, the user gets data ordered by "field_1" and "field_2", and the grid shows this sort on column headers. The user then could reorder the data in any way, by clicking on column header.

What I would like to do is to reset the default sort to the initial one, as defined in the DataSource declaration, showing it again on column headers, and without create a new DataSource again.

Something like:

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

The solutions provided do not seem to reach the point (and still I do not understand why I am losing reputation points for a legitimate question that seems to be not so trivial and should be addressed by the framework).

Please show me I am wrong (I am not worrying about losing reputation - I would like to just understand how to solve a problem).

Answer 1

var kendoGrid = $("#grid").data('kendoGrid');
var dsSort = [];
dsSort.push({ field: "fieldName1", dir: "asc" });
dsSort.push({ field: "fieldName2", dir: "desc" });
kendoGrid.dataSource.sort(dsSort);

Answer 2

Here is a jsfiddle for exactly what you are asking: http://jsfiddle.net/MechStar/c2S5d/

In a nutshell though, you need to set the dataSource to null initially, then inject the dataSource when you get the needed input from the user:

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

Answer 3

Yes. It is possible via the sort setting.

Answer 4

So you want to set the sort before it reads data the first time ? Just make sure you have autobind: false on your ui control, then set the sort properties on the datasource, and then call datasource.read() when you are ready to get the sorted data.