Telerik MVC Chart ClientEvents.OnDataBinding

Question

I want to show the poll result for a specific survey question. When I clicked the list of questions, I want to associate my chart with the query according to the selected question.

So my plan was; 1. Get the questionId from the selected question line. this is normal.

• ClientEvents.OndataBinding event definition in my diagram. So I could pass questionId with;

  function onChartDataBinding (e) {e.data = $ .extend (e.data, {questionId: questionId}); }

• using $('#ChartPollResults').data('tChart').rebind(); in the selected question list grid event.

This script works when I have a second grid snap according to the first grid of the selected row. But there seems to be no ClientEvents.OnDataBinding event to manage the chart. And the " rebind() " method is not supported in the chart control.

The chart code used is below.

 @(Html.Telerik().Chart<QuestionResult>() .Theme("WebBlue") .Name("ChartPollResults") .Title("Poll Question Choice Number vs. Choice Count") .Legend(legend => legend.Position(ChartLegendPosition.Bottom)) .Series(series => { series.Bar("ChoseCount").Name("Choice Count").Gap(5); }) .CategoryAxis(axis => axis.Categories(o => o.ChoiceNumber)) .DataBinding(dataBinding => dataBinding.Ajax().Select("_PollResultChartBinding", "Poll", new { questionId = 0 })) .HtmlAttributes(new { style = "width: %100px; height: 270px" }) ) 

Binding Method My Controller;

 public ActionResult _PollResultChartBinding(int questionId = 0) { //questionId = 3; if (!ModelState.IsValid || questionId == 0) return Json(new List<QuestionResult>()); PollQuestionDefinition pollQuestion = service.Get(questionId); List<PollAnswer> pollAnswers = service.GetPollAnswersByQuestion(questionId); PollQuestionResultUI result = new PollQuestionResultUI(pollQuestion, pollAnswers); return Json(result.Results); } 

When I comment on the line //questionId = 3; , I can easily see the results for the question wiht Id = 3 in the diagram.

But I can not pass the questionId to the chart.

Thanks in advance.

Answer 1

First of all, I immediately noticed that you set the questionId value to 0 in the ActionResult parameters. I actually just changed the diagram in which I worked and executed it

 new { questionID = 0} 

as an extra parameter for my Ajax select statement, and it went fine.

Regarding parameter passing, you can consider using POST on the server in the selection of Grid and passing this parameter this way. I know this may not be ideal, but theoretically you could fill out a chart in this post or just set up a ViewData record to contain the specific question id you are looking for.

I also noticed that you posted this to Telerik forums , and from the answer there it seemed that the above approach could really work very well, or you could use the approach mentioned there (partial view with ajax calls).

Answer 2

This is my opinion for your source code should be like this:

 //controller binding method public ActionResult _PollResultChartBinding(string questionId) { //questionId = 3; int _questionId = String.IsNullOrEmpty(questionId) ? 0 : Convert.ToInt32(questionId); if (_questionId == 0) return Json(new List<QuestionResult>()); PollQuestionDefinition pollQuestion = service.Get(_questionId); List<PollAnswer> pollAnswers = service.GetPollAnswersByQuestion(_questionId ); PollQuestionResultUI result = new PollQuestionResultUI(pollQuestion, pollAnswers); return Json(result.Results); } **in your view, there is no problem with the code**. but, for rebind that chart, this is the code : example : (running from developer console for IE or firebug for firefox browser) var chartPollResult = $('#ChartPollResults').data('tChart'); chartPollResult.rebind({ questionId: "0"}); but if you want make it into function, code should be like this: function rebindChartPollResult(e, param) { e.data('tChart').rebind({ questionId: param}); } calling method : rebindChartPollResult($('#ChartPollResults'), "0"); 

ajax binding link for telerik chart (does not include how to restore the chart): http://demos.telerik.com/aspnet-mvc/chart/ajaxbinding