This is a migrated thread and some comments may be shown as answers.

Chart SeriesClick to filter a Kendo Grid

4 Answers 139 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 31 Aug 2017, 08:54 PM

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!

4 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 04 Sep 2017, 06:51 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Mike
Top achievements
Rank 1
answered on 05 Sep 2017, 02:00 PM

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);

          }

0
Mike
Top achievements
Rank 1
answered on 05 Sep 2017, 02:18 PM
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?
0
Stefan
Telerik team
answered on 07 Sep 2017, 07:51 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Chart
Asked by
Mike
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Mike
Top achievements
Rank 1
Share this question
or