Bind Remote Complex Data Kendo DataSource

3 posts, 0 answers
  1. Jaime
    Jaime avatar
    61 posts
    Member since:
    Mar 2013

    Posted 02 Jul 2013 Link to this post

    It would be nice to send some meta information about the data along with the records. 

    I want to dynamically show series based on the value of one of the bound fields in the datasource. If there are no records I don't want to show a donut chart ring for example.

    Currently, I have to resort to some brittle logic in the change event of the datasource to do the trick. 

    change: function (e) {
     
        var item = this.data()[0];
        var chart = $("#training-chart").data("kendoChart");
         
     
        // find the empty donut items.
        if (item.numberCompleted == 0)
            chart.options.series.splice(0, 1);
        if(item.numberExpired == 0)
            chart.options.series.splice(1, 1);
        if (item.numberNotTaken == 0)
            chart.options.series.splice(2, 1);
        if (item.numberDue == 0)
            chart.options.series.splice(3, 1);
        chart.refresh();
    },
    If I could create a datasource that would look more like the following:
    data =  
    {
          metaproperty : someUsefulInfo,
          chartData  : [ { data: 1 }, { data: 2 },{ data: 3 }]
    }

    If I could then bind the chartData as my chart datasource instead of the data starting at the root that would be great!
  2. Jaime
    Jaime avatar
    61 posts
    Member since:
    Mar 2013

    Posted 02 Jul 2013 Link to this post

    I have figured out that I can solve half the problem by using the schema property on the datasource. Unfortunately, I am only able to access the array of data items but not the original data. 

    dataSource: {
        transport: {
            read: {
                url: "/Training/TrainingChartData",
                dataType: "json",
            }
        },
        change: function (e, o, i) {
     
            // arguments.callee.caller.caller.caller.caller.arguments
     
            var item = this.data()[0];
            var chart = $("#training-chart").data("kendoChart");
             
            // find the empty donut items.
            if (item.numberCompleted == 0)
                chart.options.series.splice(0, 1);
            if(item.numberExpired == 0)
                chart.options.series.splice(1, 1);
            if (item.numberNotTaken == 0)
                chart.options.series.splice(2, 1);
            if (item.numberDue == 0)
                chart.options.series.splice(3, 1);
            chart.refresh();
        },
        schema: {
            data: "results"
        }
    },
    With this in place I can send down the data as described but the meta data is inaccessible except by using the hideous code commented out in the above code.  Please add a second parameter to the "Change" callback with the payload of the original data so that I can get at more elegantly. 

    So for now I will have to use 
    try
      {
     var meta =  arguments.callee.caller.caller.caller.caller.arguments[0].meta
      }
    catch(err)
      {
         alert("oh no, the implementation has changed");
      }

    That is unless there is an easier way that I missed. 
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Jul 2013 Link to this post

    Hi Jaime,

    Apologies for not getting back to you earlier.

    I am afraid your scenario is not supported out-of-the-box - Kendo UI Chart is designed to operate with flat data. As another workaround you could parse the collection in dataSource.schema.parse before assigning it as data of the Chart. 

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top