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

Get and apply grid filters to a chart

1 Answer 56 Views
Filter
This is a migrated thread and some comments may be shown as answers.
Ernesto
Top achievements
Rank 1
Ernesto asked on 11 Sep 2020, 08:19 PM

 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?

 

 

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 15 Sep 2020, 05:08 PM

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.

 

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Filter
Asked by
Ernesto
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or