Get and apply grid filters to a chart

[Ernesto]

 I have a grid that shows a detailed list of items. Below that, I show a number of pie charts that show the breakdown of the list category totals, so the grid and the charts use different data sources/ queries since i need grouped  totals for the charts.   

However, when filtering the grid, I would like to be able to get and apply the same filters to my pie chart data sources.  This way they will show the correct totals based on the filtered grid.

What is the best way to apply the same filters from the grid on to the pie charts on the grid filter event?

 

 

[Georgi Denchev]

Hello, Ernesto

 

One solution that comes to my mind, is utilizing the grid filter event handler.

First, let's configure the event handler. The name of the filter, will be the exact same, as the one that we will use on the client.

@(Html.Kendo().Grid<MyModel>()
    .Name("Grid")
    .Events(events => events.Filter("gridFiltering")));

Next, in the <script></script> section of your file, we will define the function that will process the filtering. Don't forget to double-check the naming.

function gridFiltering(e) {
            // Get the filter from the event 
            var filter = e.filter;
           
            // Get the chart to which you will be applying the filter.
            var chart = $("#chart").data("kendoChart");

            // Apply the filter from the grid, to the chart.
            chart.dataSource.filter(filter);
}
            

You can find out more about the client side of the filter event here.

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/filter

 

And about the MVC Handler here.

 

https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridEventBuilder#filtersystemstring

 

You can also check a demo of the Filter Event Handler here.

 

https://demos.telerik.com/aspnet-mvc/grid/events

 

If this is not the desired behavior, or you have further questions, feel free to ask.

Regards, Georgi Denchev Progress Telerik