Telerik MVC Chart ClientEvents.OnDataBinding - asp.net-mvc

Question

I want to show a poll result for a specific poll question.
When question list clicked i want to bind my chart with a query according to selected questionId.
So my plan was;
1. get questionId from selected question row. it's ok.
defining ClientEvents.OndataBinding event on my chart. So i would be able to
pass questionId with;
function onChartDataBinding(e) {
e.data = $.extend(e.data, { questionId: questionId });
}
using $('#ChartPollResults').data('tChart').rebind(); on question list grid row selected event.
This scenario works when i have second grid binding according to first grids selected row.
But it seems there is no ClientEvents.OnDataBinding event on chart control.
And "rebind()" method isn't supported on Chart control.
The chart conrol i use 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" })
)
My Controller binding method;
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 out //questionId = 3; line i can see the results for the question wiht Id= 3 in chart with no problem.
But i can't pass questionId to chart.
Thanks in advance.

Answer 1

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");
reference for telerik chart ajax binding (not included how to rebind chart) :
http://demos.telerik.com/aspnet-mvc/chart/ajaxbinding

Answer 2

First of all, one thing I immediately noticed is that you set questionId equal to 0 in your ActionResult parameters. I actually just modified a Chart I had up and running to pass in
new { questionID = 0}
as an additional parameter to my Ajax select statement and it passed in fine.
As for passing the parameter you could consider using a POST to the server on Grid selection and pass the parameter that way. I know it might not be ideal here, but you could theoretically either populate the Chart in that post, or just set a ViewData entry to contain the particular questionID that you are looking for.
I also noticed that you submitted this to the Telerik forums and from the response there it would seem that the above approach might actually work pretty well, or you could use the approach mentioned there (partial view with ajax calls).