Hi,
I have data chart rendered using HtmlHelper on my MVC application. How can handle the click event on the series items?
I am using Ignite UI 2015 Vol 1.
Hi Keanchan,
Thank you for posting on our forums.
With each IgniteUI control, the MVC wrappers include a method called AddClientEvent() which can be used to Define the JavaScript function associated with the event. To learn more please review our help documentation. For handling the click action on the igDataChart, I recommend using the seriesMouseLeftButtonDown event.
Please let me know if you have further questions regarding this matter.
Hi Jose,
Thank you for the quick reply. I could not find 'AddClientEvent()' on Html.Infragistics().DataChart. Below is my sample code:
@(Html.Infragistics().DataChart(Model.Customers.AsQueryable()) .DataBind().ID("chart") .Axes(a => { a.CategoryX("XLabel").Label(d => d.FirstName) .LabelAngle(45) .Title("FirstName") .LabelVisibility(Visibility.Visible); a.NumericY("YLabel").Title("Id").Label(d => d.Id); }) .Series(s => { s.Column("Y1") .Title("Id") .XAxis("XLabel") .YAxis("YLabel") .IsTransitionInEnabled(true) .IsHighlightingEnabled(true) .ShowTooltip(true) .ValueMemberPath(d => d.Id); }) .Render() )
Please advice.
Thank you for the update.
It appears that an addClientEvent() method for the igDataChart MVC wrappers is missing. I will investigate this further and update you with my progress on this thread.
In the meantime, I recommend setting the ID for the chart and using it as the selector for handling the events. Examples of how you can configure events can be found in our API documentation.
Noted. 'addClientEvent()' method will be really useful.
Meanwhile, I found the work around based on your suggestion. Here is the working script:
$(document).delegate("#chart", "igdatachartseriesmouseleftbuttondown", function (evt, ui) { var xValue = ui.item.XLabel; console.log('mouse down event triggered at ' + xValue); });
Once I receive more details regarding the AddClientEvent() method, I will be sure to post it on this forum thread.