[Solved] Wrong chart rendered because of premature Ajax binding

[Achilles]

Hi,

I am using a MVC grid control and a chart control in the same page , both bound to their data source by Ajax binding in the Razor.  
The execution architecture is as :
1. The Grid control gets it data from the controller which in turn gets it from a web-service
2. When the the grid control completes loading, it reads some settings and calls a rebind on the chart with some calculated parameters
3. The chart renders with the right parameters

This works !!

My problem is that, because the chart is Ajax-bound, it calls on it's data source anyway. If the default call happens before the grid is loaded, I get 2 redraws. If the default call happens after the programatical rebinding, then I get a wrong chart drawn on type of the right chart.

Is there a way I can do a late binding of the chart's data-source by client API to avoid this problem ? I'm open to other alternate suggestions. I'm attaching a sample. Please have a close look when the chart loads the first time. (To reload the chart, reload the current page)

My actual code for the Ajax binding is

.DataBinding(dataBinding => dataBinding
    .Ajax().Select("FetchChartData",
    "Chart",
    new {
        displayMode = Model.Attributes.DisplayType,
        day = Model.Attributes.StartDate,
        duration = Model.Attributes.DurationType,
        datatype = Model.Attributes.DataType
    }))
.ClientEvents(events => events
    .OnLoad("onChartLoad")
    .OnDataBound("onDataBound"))

My second problem, is that if I refresh my chart, it calls a rebind . In my sample if you "Refresh" with the 2nd inverter selected,  and then check/uncheck the "Show marker" check-box, you can see my problem ....

Thanks

Achilles

[Daniel]

Hello Achilles,

To prevent the chart from binding immediately you should add a handler to OnDataBinding event and use the event argument's preventDefault method. You could either use a flag or unbind the event once the first request is prevented.

function onDataBinding(e) {
    e.preventDefault();
    $(this).unbind('dataBinding');
}

Regarding your other question, I can confirm that this is not the expected behaviour. A workaround for now is to use the Chart's redraw method instead e.g.

chart = getChart();
chart._chart.redraw();

Kind regards,
Daniel
the Telerik team

[Achilles]

Thanks . It solves the problem.

Achilles