How to sync grid and chart in sorting

2 posts, 0 answers
  1. morteza
    morteza avatar
    9 posts
    Member since:
    Jul 2017

    Posted 07 Aug Link to this post

    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?

     

     

     

  2. Tsvetina
    Admin
    Tsvetina avatar
    2329 posts

    Posted 09 Aug Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top