How to sync grid and chart in sorting

[morteza]

I have grid and chart ,they are using the same datasource,my data-source is coming from a ajax call,im not using my datasource like:

dataSource: {

serverFiltering: true,

transport: {

read: { url: "https://demos.telerik.com/kendo-ui/service/StockData", dataType: "jsonp"},

parameterMap: function(data) {

return { filter: JSON.stringify(data.filter) };}}, schema: stockDataSchema },

 

i just do a ajax call:

 

 $.ajax({
               dataType: "json",
               type: "POST",
               url: "@Url.Action("Controller","View")",
               contentType: "application/json; charset=utf-8",
               data: JSON.stringify({ "parameters}),
                   success: function (result) {

// I USE THE RESULT AS A DATASOURCE OF MY CHART AND GRID,DIRECTLY

 

}};

now,what i want is ,when i click on grid item to be sorted,chart should be sorted accordingly ,how should i achieve this?

 

 

 

[Tsvetina]

Hello Morteza,

The easiest way to synchronize the two widgets data is to put the result in a DataSource and bind both widgets to it:

var dataSource = new kendo.data.DataSource({
  data: result
});
$("#grid").kendoGrid({
  columns: [
    { field: "field1" },
    { field: "field2" }
  ],
  dataSource: dataSource,
  sortable: true
});
$("#chart").kendoChart({
  dataSource: dataSource,
  series: [{
      field: "field1",
      categoryField: "field2"
  }]
});

In this way, when the Grid is sorted, this will sort the DataSource, which in turn will refresh the Chart with the sorted data.

Here is a Dojo showing such scenario:
https://dojo.telerik.com/egOZEqAH

Regards,
Tsvetina
Progress Telerik