Kendo UI Chart DataBinding not firing

Question

I'm looking into checking the data source after it is bound to see how many items there are. For some reason I can't get the dataBound or dataBinding events to even fire.

The data is actually being passed into a function so when the grid is created it has the data locally.

Example: http://dojo.telerik.com/IjAKo/2

Source Code:

<div id="grid"></div>

<script>
  function onDataBinding(e) {
    console.log('here');
  }

  $(document).ready(function() {
    var chart = $("#grid").kendoChart({
      chartArea: {
        height: 250,
      },
      legend: {
        position: "bottom",
        labels: {
          font: "bold 10px Arial",
        }
      },
      seriesDefaults: {
        type: "column",
        spacing: 0,
        overlay: {
          gradient: "none"
        }
      },
      series: [{
        name: "ESCROW",
        color: "#cccbcb",
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      }, {
        name: "NON-ESCROW",
        color: "#406f8c",
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      }],
      categoryAxis: {
        line: {
          visible: false
        },
        categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Set", "Oct", "Nov", "Dec"],
        majorGridLines: {
          visible: false
        }
      },
      valueAxis: {
        labels: {
          format: "{0:N0}"
        },
        line: {
          visible: false
        },
        majorGridLines: {
          visible: false
        },
        max: 20
      },
      tooltip: {
        visible: true,
        format: "{0:N0}"
      },
      dataBinding: onDataBinding  // tried to do it here.

    });
    // tried to bind after initialization
    chart.bind("dataBound", function(e) {
      alert('here')
    });

  });
</script>

score 4 · Accepted Answer · answered Jul 26 '15 at 05:23

4

There is not dataBinding event in chart, there is only dataBound. This event fires only when the chart has specified dataSource, even empty, so you have to add line like so to your chart:

dataSource: {},

And one more thing: in your example you use local data, so if you first create your chart and then bind function to dataBound, the event will not fire cuz data is already bound. Define dataBound event in chart constructor:

dataBound: function(e) { console.log('data bound') },

Fixed example: http://dojo.telerik.com/IjAKo/4

answered Jul 26 '15 at 05:23

Jarosław Kończak

3,387
2
19
36

Thanks, that's kind of obscure but it does work. Didn't realize I had to have an empty dataSource. – lucuma Jul 26 '15 at 07:18
If you leave it like it is your `dataSource` property will have 0 dataItems, because you specified your data explicitly in chart series. You can find amount of data series directly in chart options. To have data in your chart `dataSource`, you have to rearange the chart costructor. See this example: http://demos.telerik.com/kendo-ui/line-charts/local-data-binding – Jarosław Kończak Jul 26 '15 at 11:03

Kendo UI Chart DataBinding not firing

1 Answers1