Datagrid Reset

Radzen Studio Angular
1

Greetings,

I am working with a scenario which requires clearing the sorting, paging, and filtering between calls to load() on an Angular datagrid. I've been able to execute the following code which produces the data results I need, but does not visually reset the filter and sort components of the datagrid UI:

this.grid0.rawFilters = {};
this.grid0.filter = '';
this.grid0.orderBy = '';
this.grid0.skip = 0;
this.grid0.callLoadData();

Am I doing something wrong, or is the datagrid simply lacking a reset function?

2

Yes, the DataGrid doesn't have a reset function at the moment.

3

You can try the PrimeNG DataTable reset method though: this.grid0.dataTable.reset();

4

Yes, thanks for that tip. It will visually reset sorting, but not the actual sorted data. It will not reset filtering at all. Here is what I have found works to reset a datagrid, although it feels like a hack. :slight_smile: :

I have only tested this method on a datagrid which is pulling data from a database and performing sorting, filtering, and paging on the database as well.

Create a page variable named p_filter and set it to an empty string. When setting up the datagrid columns, data bind each FilterValue property to p_filter. Changing the value of p_filter will only change the UI value of the corresponding filter inputs on the datagrid, but does not appear to update the underlying filter settings or trigger a grid load. This binding appears to be one way, so what the user types into the filter input will not change the page variable. If the end goal is to visually clear out all the filter inputs on a grid, then this one-way binding means we can setup only one page variable and bind it to each FilterValue property for each column.

Execute the following code segment to 'reset' the grid:

//set p_filter to a single space to trigger data binding to update
this.p_filter = ' ';
//Wait for a short time, then set p_filter back to an empty string.
//This should visually clear out filtering on columns with the 'FillterValue' property set to ${p_filter}
//I could not get this to work without a setTimeout().
//I'm guesing it has something to do with timing of data binding.
setTimeout(() => {this.p_filter = '';}, 300);
//manually reset the data filters.
this.grid0.rawFilters = {};
this.grid0.filter = '';
//manually reset data sorting
this.grid0.orderBy = '';
//manually reset paging to page one
this.grid0.skip = 0;
//Call the PrimeNG reset function which will serve to visually reset the column sorting.
//It will not reset the actual data sorting.
this.grid0.dataTable.reset();
//Reload the grid data.
this.grid0.callLoadData();

Hopefully, the Radzen team will be able to add a reset function in the future. For now, this workaround may be helpful.