Chart does not work with dataBound

[Paul]

In case others have the issue, I have posted my question on Stack Overflow.

https://stackoverflow.com/questions/60724995/kendoui-for-jquery-chart-databound-event-does-not-work

 

Here's a simplified example of my data:

[{"Name": "Bob", "Count":3}, {"Name": "Steve", "Count":5}]

What I want is a chart title of: Total FOO: 8. So the title must be based on the data. The data is AJAX and this is an ASP.MVC application.
In my CSHTML I have:

 

.DataSource(ds => ds.Read(read => read.Action("MeMethodName", "MyControllerName")))
.Events(events => events.DataBound("setChartTitle('chartName', 'Total FOO')"))

Here's the crazy hack I had to do:

 

function setChartTitle(name, title) {
      let chart = $("#" + name).data("kendoChart");
      if (chart) {
         let ds = chart.dataSource;
         let total = 0;
         for (let i = 0; i < ds.data().length; i++) {
            total += ds.data()[i].Count;
         }

         chart.options.title.text = title + ": " + total;
         chart.refresh();
      } else if (arguments.length < 3) {
         // Data source was not found and this was initiated through Kendo. Wait and try again but only once
         setTimeout(function () {
            sumEntityCount(name, title, "stop");
         }, 500);
      }
   }

 
This is really bad.

1. Accessing the kendoChart returns undefined, yet the chart itself called this. This is why I need to check if (chart) above.

 

2. This leads to a hacky ELSE block I added where I can call this again with a 500 ms delay. This alone is a bug as 500ms is a random number and may not be enough. I can't ship like this.

3. To prevent recursion I call the same function with a different parameter.

4. If the values are found, then I can't just set the chart options. I need to call refresh which redraws everything.

Questions:

1. Why is the kendoChart data undefined initially? Why has Telerik called dataBound when there's nothing there?!
2. Isn't there a dataBinding event? I don't want to do this after the fact nor do I want to refresh the whole thing.

[Paul]

I have this solved. I will update the SO post.

[Nikolay]

Hello Paul,

Thank you for sharing this scenario and the resolution you came up with.

Indded, in this case the render chart event can be used. I am reposting your answer to the StachOverflow thread here so others can benefit from it here.

The chart itself is passed in when you declare a basic function without calling it:

.events(events => events.Render("someFunction"))

Then declare your function:

function someFunction(sender) {
   // sender.chart is what I want
}

But you cannot pass any arguments here. Which means I can't use it.

The hack is to do the following:

.Events(events => events.Render("function(sender) { someFunction(sender, 'param1', 'param2', 'param3'); }"))

This gives it an actual function instead of calling a function. Kendo passes in the sender as expected and you can pass it along with new parameters to your JavaScript.

I also switched to using Render instead of DataBound.

 

Regards,
Nikolay
Progress Telerik