DataGrid Sort & Filter not working

Hi Radzen team,

Using a Master detail page with two datagird components the sorting and filtering does not work on the detail part . the master part it works.

Is there a different approach in this case ?

Regards ?

Hi @mcanavar,

Not sure how the details are bound in your case however you can check a page created using our wizard where sorting and filtering works on both master and detail DataGrid:




Hi,
Found what was disabling the sorting and filtering on the detail grid , it was an set property to save the event.filter and event.sortorder to a property to be used on a export button.
removing these two set property directives , sorting and filtering works, however .. the export button has no input for wat is filtered or sorted by the user in the details grid ?
How can I export the data from the details , sorted and filtered by the user, so not all the data just the filtered records .
Now I get all the data and all the columns , unsorted and unfiltered2020-01-26_08-13-22

Hi @mcanavar,

In this case you will need to execute the same code as master grid RowSelect event in child grid LoadData:

the filter expression however should be OrderId eq ${master.Id}

Hi ,

Sorry , I have changed like you suggested , now filtering and sorting do not work .
Also exporting to Excel takes all columns of the data not the ones that are visible in the grid , How could we resolve this quick , this trail on error in this situation takes too much time,

Not sure what you've made however here is what I suggested:


Sorting and filtering works and you have saved two page properties to use them when exporting

I have found Why it was not working:
I had a default orderBy , and the ${event.orderby}
Error in debug:



Removing the orderby in the child grid .. fixed the filter ..

When filtering the grid uses "Begins with " and if the export uses the filter it changes to "Contains " ? So the export has more records ..

Export does not work the filter is filled only with the value set in the grid manually,
So in my example filter is set only with the " Contains ("text typed", columnname).
This exposes all records with only this filter ...
please advice ?

The export is using separate data source method invocation - not the one used to populate the grid in LoadData. To export the child grid you need to apply both filters - the one that will filter your child data according to selected master record and the one that you've saved in child grid LoadData (see my previous replies). Both filters should be applied with and operator.

I've included my screenshot .. both filers are applied .

The screenshot is from LoadData Query Builder, not from export.

Export button .. grid2Filter and grid2OrderBy are set in loadData event of grid2 ( child)

Is there a sequence or in witch order the events happen ..

This screenshot shows how you've applied only the filter saved in your LoadData event. You need to add also the filter that is used to limit the child records according to selected master record. Since there is no Query Builder here and to avoid complex expressions in the $filter parameter input I suggest you to use custom filter function with two parameters. First parameter will be the saved child grid filter and second parameter will be the master record filter. I suggest you to check this article for more info about filtering with custom function: https://www.radzen.com/documentation/date-range-filter/

the article is about a datepicker ?
your first screenshot and explanations , did it include custom filter function ? bit confused now ..

The article is complex example for filtering including custom filter function.

Here is an expression without filter function: OrderId eq ${master.Id} ${this.childGridFilter ? ' and ' + this.childGridFilter : ''}




Application can be found here: https://github.com/akorchev/radzen/tree/master/ExportChildGridAngular

Thank you for explaining and example! This works like expected, but , there is always a but : It would have been nice if it was not that complex , maybe this way it is more flexible ..

Regards !

Hi @mcanavar,

The task is indeed complex. Angular application with .NET Core server-side to query SQL Server database using EF and display master/details DataGrids based on database relations. Sorting, filtering and paging should be applied server-side on both master and child grid and the child grid should be exported to Excel/CSV (again server-side) respecting the current sort and filter.

Using Radzen I've made the app in less than 10 min. - imagine if you need to create the same application manually how much time and knowlege you will need. :slight_smile:

Hi ,
Thats true, Radzen is a huge benefit, and like how it is progressing: will be moving to Blazor if that becomes more stable , until 3.0 I have struggled to keep up with the changes every month and is very appealing to use only one language to program with.

Continuing on this subject:
Radzen has a standard set of templates to generate the standard CRUD tables / layout. Is it possible or maybe later to implement your own "standards" to generate CRUD tables with Radzen, some things that I have to do on each page could be incorporated within the standard CRUD templates.

Thank you and Keep up the good work!

Kind Regards
Mehmet