Search code examples
kendo-uikendo-chartangular-kendokendo-multiselect

how can I use same data source for Kendo chart and kendo multi select?


I am using kendo angular chart and multiselect. Right now I am call same api twice to load the data in both. Is there any way to define multiple schema in same api call? My data is like following

{
  "List": [
    {
      "Name": "xyz",
      "Activation": "2016-12-08",      
      "End": "2016-12-09",
      "Run": "45",
      "Status": "FAILURE",
      "color": "red"
    },
    {
      "Name": "wqe",
      "Activation": "2016-12-07",        
      "End": "2016-12-08",
      "Run": "46",
      "Status": "FAILURE",  
      "color": "red"
    }
  ],
  "NameList": [
    {
      "Name": "joo"
    },
    {
      "Name": "foo"
    },
    {
      "Name": "too"
    }
  ]
}

I want to add "List" in grid and "NameList" to be added in multi select in one api call.

currently I am using following code to call api

function getDataSource(requestUrl) {

    var dataSource = {
        transport: {
            read: requestUrl,
            dataType: "json"
        },
        schema: {
            data: "List",
            total: function (response) {
                return response.StatisticList.length;
            },
            model: {
                fields: {
                    Name: { type: "string" },
                    Activation: { type: "date" },
                    End: { type: "date" },
                    Run: { type: "number" },
                    Status: { type: "string" },                        
                    color: { type: "string" }
                }
            }
        },
        sort: { field: "ActivationTime", dir: "desc" },
        pageSize: common.Grid.pageSize
    };
    return dataSource;
}

function getMultiSelectDataSource(requestUrl) {

    var dataSource = {
        transport: {
            read: requestUrl,
            dataType: "json"
        },
        schema: {
            data: "NameList",
            model: {
                fields: {
                    Name1: { type: "string" }
                }

            }
        }
    };
    return dataSource;
}

Solution

  • It is possible to achieve data binding of both widgets with one request in your scenario, if you make the request manually yourself, and use local (custom) transport or static dataSource.data assignment in the DataSources of the Chart and MultiSelect.