Chart SeriesClick to filter a Kendo Grid

[Mike]

I'm trying to make my chart interactive by displaying data in a Kendo Grid based on clicking on a data point from a Kendo Chart,

I have a working chart and it's event is connected to a seriesclick which currently is tied to a kendoConsole.Log.  I would like to hide the grid and display it filtered when a data point is clicked and refilter if another is clicked.   Is this possible?  If so how do you do it?

 

Thanks!

[Stefan]

Hello Mike,

This can be achieved in the series click event by retrieving the current value of the series and setting the same value as a filter to the Grid dataSource:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#events-seriesClick

Another option will be to use custom logic and the same dataSource for the Chart and the Grid. I made an example demonstrating this approach as well:

http://dojo.telerik.com/ADAlu/2

I hope one of these approaches to prove helpful.

Regards,
Stefan
Progress Telerik

[Mike]

Thanks for the response.  I'm looking over the solution and I'll let you know how it goes.  I started this going a different route.  I created the click event on a chart and was hoping to pass the clicked date/time as a filter date.  I created a stored procedure that returns the data needed and has the filter date as a parameter.  I'd need to pass the clicked date/time to the grids data source controller code.   Is this possible?  I'd rather the stored procedure do the business logic to pull the data rather then filtering it at the grid. 

 

        public ActionResult HourlyErrorsDetail_Read([DataSourceRequest] DataSourceRequest request, DateTime filterDateTime)
        {

                ElmahService es = new ElmahService();
                //var newErrors = es.GetErrorsHourCount();
                var newErrors = es.GetElmahHourlyDetails(filterDateTime);

                return Json(newErrors, JsonRequestBehavior.AllowGet);

          }

[Mike]

I also noticed I forgot to mention I'm doing this using Kendo MVC.  Are we able to do your example or mine using razor and kendo mvc?

[Stefan]

Hello Mike,

In general, the examples can be made using the MVC version of the widgets as they are wrappers of the jQuery one and behave the same on the client.

If the desired result is to have the date time object I can suggest the following approach.

1) On the series click call the read method of the Kendo UI Grid dataSource instance:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-read 

2) Use the Data() method of the Grid read to pass additional parameters using a function:

http://www.telerik.com/forums/pass-additional-parameters-to-read-ajax-datasource-method---mvc

.Read(read => read.Action("Products_Read", "Grid").Data("additionalInfo"))

function additionalInfo() {
    return {
        filterDateTime: new Date(),// This will return the current date/time
    }
}

This will allow filtering the Grid based on the current time when the Chart is clicked. 

Regards,
Stefan
Progress Telerik