Use one datasource for mutliple UI widgets

[John Hunter]

I would like to have one kendo datasource that get its data from an ajax call that contains multiple arrays of data in one wrapper. The data in each array could be shaped differently and would be used for different tables/charts on the same page. So for example the data returned from the web service call would look like:
[
{ type: "names", name: "john", age: 12},
{ type: "names", name: "andy", age: 10},
{ type: "names", name: "sally", age: 11},
{ type: "toys", item: "bike", price: 69.99, color: "red"},
{ type: "toys", item: "yo-yo", price: 5.99, color: "blue"},
{ type: "toys", item: "football", price: 19.99, color: "brown"}
]

and I would like to have one table show the names and another table show the toys.  Is this possible?

[Nikolay Rusev]

Hello John,

You can retrieve the data from the server with on request (via $.ajax for example)  and for each grid create different data source that operates on client (client filtering).

See the following jsFiddle for more details. The data variable can be populate with one $.ajax call in the real scenario.

Regards,
Nikolay Rusev
the Telerik team

[John Hunter]

The example you provided worked great. Thanks.

var data = [

 { type: "names", name: "john", age: 12},

 { type: "names", name: "andy", age: 10},

 { type: "names", name: "sally", age: 11},

 { type: "toys", item: "bike", price: 69.99, color: "red"},

 { type: "toys", item: "yo-yo", price: 5.99, color: "blue"},

 { type: "toys", item: "football", price: 19.99, color: "brown"}

 ]; // - this data might be retrieved from server via $.ajax

  

$("#grid1").kendoGrid({

    dataSource: {

        data: data,

        filter: { field: "type", operator: "eq", value: "names" },

        pageSize: 2

    },   

    scrollable: false,

    sortable: true,

    pageable: true,

    columns: ["name", "age"]

})

.data("kendoGrid"); 

[Dmitry]

Can you show here how to populate "var data=" via $.ajax ?

[John Hunter]

//HERE IS HOW I DID IT.....
var reportData;

 

function GetReportData() {

 

    //Make ajax service call to get the data

    var request = $.ajax({

        url: "../services/report-services.svc/GetReportItems",

        type: "GET",

        cache: false,

        dataType: "json"

    });

 

    request.done(function (msg) {

 

        //bind the result to the global data object

        reportData = msg.d;

 

        //bind the data to the sub-reports

        PopulateReport();

    });

 

    request.fail(function (jqXHR, textStatus) {

        alert("Request failed: " + textStatus);

    });

}

 

function PopulateReport() {

     

    $("#Chart").kendoChart({

        theme: "metro",

        dataSource: {

            data: reportData,

            filter: { field: "type", operator: "eq", value: "names" }

        },

        title: {

            text: "Graduation Status"           

        },

        legend: {

            visible: false

        },

        seriesDefaults: {

            type: "column",

            stack: true

        },

        series: [

        {

            field: "name",

            name: "Name",

            color: "#5084EA"

        },

        {

            field: "age",

            name: "Age",

            color: "red"

        }],

        tooltip: {

            visible: false

        },       

        valueAxis: {

            max: 100,

            min: 0,

            labels: {

                visible:false

            }

        },

        categoryAxis: {

            field: "Agency",

            labels: {

                visible: false

            }

        }

    });
}


[Naveen]

Iam trying to get this with passing json webservice but still chart is not showing,please will you check this and let me know what will be the error.Is there wrong in code.Hope will get reply soon.Please help me.  
var reportData;
 
function GetReportData() {
 
    //Make ajax service call to get the data
    var request = $.ajax({
        url: "http://localhost/JsonWebservice/Service1.asmx/GetOrderSummary",
        type: "GET",
        cache: false,
        dataType: "json"
    });
 
    request.done(function (msg) {
 
        //bind the result to the global data object
        reportData = msg.d;
 
        //bind the data to the sub-reports
        PopulateReport();
    });
 
    request.fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });
}


function PopulateReport() {


    $("#Div3").kendoChart({
        theme: "metro",
        dataSource: {
            data: reportData,
            filter: { field: "type", operator: "eq", value: "names" }
        },
        title: {
            text: "Order Summary"
        },
        legend: {
            visible: true
        },
        seriesDefaults: {
            type: "column",
            stack: true
        },
        series: [
        {
            field: "UserCode",
            name: "UserCode",
            color: "#5084EA"
        },
        {
            field: "COUNT",
            name: "COUNT",
            color: "red"
}],
            tooltip: {
                visible: true
            },
            valueAxis: {
                max: 100,
                min: 0,
                labels: {
                    visible: true,
                    format: "{0:N0}"
                }
            },
            categoryAxis: {
                field: "UserCode",
                labels: {
                    visible: true
                }
            }
        });
    }

[Dmitry]

    var data = {"statistics":[],"tasks":[]};

 

    var statisticsDataSource = new kendo.data.DataSource({

        data: data,

        schema: {

            data: "statistics"

        }

    });

 

 

    var tasksDataSource = new kendo.data.DataSource({

        data: data,

        schema: {

            data: "tasks"

        }

    });

 

//function createGrid1() {...dataSource: statisticsDataSource , ...}       

//function createGrid2() {...dataSource: tasksDataSource, ...}     

 

    $(document).ready(function() {

        loadInfo();

        //createGrid1(); - uses statisticsDataSource

        //createGrid2(); - uses tasksDataSource

        autorefresh();

    });

 

    function autorefresh() {

        loadInfo();

        statisticsDataSource.read();

        tasksDataSource.read();

        setTimeout(function() {

            autorefresh();

        }, 30000);

    }

 

    function loadInfo() {

        $.getJSON("/statsAndtasksfeed", function(json) {

            $.ajaxSetup({ cache: false });

            data.statistics = json.statistics;

            data.tasks = json.tasks;

        });

    }