Column sorting doesn't get resetted after setting new data / creating a new datasource
s-eilers opened this issue · comments
What is the expected behavior?
When filling the table with new data the column sort should be reset to default. Alternatively there should be a way to remove the sort programmatically.
What is the current behavior?
When we change the data - which we do by calling refresh on the datasource, but it also happens when creating a new datasource - the table keeps its column sort when there is a prop with the same value in the new data set.
What are the steps to reproduce?
https://stackblitz.com/edit/pebula-ngrid-starter-arkf6a?file=app/app.component.ts
Sort the first column and click on either button.
Is there anything else we should know?
The same thing happens for row selection, although it is working to call clear on the selection, when you set the new data.
You can clear the sort by calling the setSort with an empty sort order.
clearSort(): void {
this.dataSource.setSort(this.dataSource.hostGrid.columns[0], {})
}I will extend the function so you can just call setSort() and this will clear the sort settings.
As for changing / updating the datasource:
When you change the datasource all sort settings are gone and those in the new datasource are applied, the sorting is saved on the datasource, the grid does not understand sorting.
So if a datasource is replaced you must re-set the sort settings.
When you refresh the datasource sorting does refresh as well. All of the examples provided in the StackBlitz are irrelevant because they also change the column structure.
Once column structure is updated the column stored in the datasource to sort by is not part of the grid anymore, even if it has the same name...
Perhaps I should add it to the documentation about switching columns
You can clear the sort by calling the setSort with an empty sort order.
clearSort(): void {
this.dataSource.setSort(this.dataSource.hostGrid.columns[0], {})
}
I will extend the function so you can just call setSort() and this will clear the sort settings.
A function to clear the sorting will help, thanks. But although it does remove the sorting of the column, the header doesn't update and the arrow is still there.
As for changing / updating the datasource:
I updated the Stackblitz, so the column changes are gone. Now when i change the datasource after sorting a column, the sorting stays the same for the new datasource. So if the sorting is saved on the datasource and i create a new one, shouldn't that reset the sorting? Or am i doing something wrong when i change the datasource like i do in the example? Calling setDataSource() on the table doesn't do anything either.
When you swap the datasource the sorting information is gone in the datasource but I now see that the matSort directive that integrates with material's MatSort is also holding the current sort and will apply it on the datasource once the datasource change.
This behaviour is reasonable since the user didn't change the sorting
See here:
Note that this is also required to support initial column and direction set from the template:
matSortActive="name" matSortDirection="desc"
As for the clearing issue, I think it's a bug and I will look into it.
It is a bug in the matSort directive and not the datasource, probably happens here:
I guess it also involves a missing change detection call, i'll look into it.
@s-eilers I found the issue and will post a fix soon with the next release that includes the grid state persistence feature.
The problem was, as suspected, in the mat sort. Not really a problem but the lack of ability to "clear" the sort state, one have to toggle all states until it get's to a state when the direction is "" and not "asc" or "desc".
I can understand why, because you can disable/enable the ability of the user to clear the direction so he will always be in either "asc" or "desc" so I had to take that into account.
So, with that in mind, note that if you set the disableClear feature of the MatSortHeader directive to true you can not clear the sort programmatically (nor through the UI) unless you disable the disableClear.
Thanks,
I am facing a similar/relating problem:
I have a component with the Ngrid, that is used by multiple routes with different data input. The data differs in column definitions, sorting etc.
Currently i do not destroy the dataSource and create a new one, but reuse the dataSource, updating the referenced data of the onTrigger() method and updating the columns of the pbl-ngrid. So far so good, most things work as intended, the only thing not working as expected is the sorting.
Each of the different data inputs comes with a different default sorting. Currently I apply the information for the sorting to the matSortActive and matSortDirection Directives of the pbl-ngrid. This works as intended for the first route I open, but if i change the data input sorting of the dataSource won't update. I tried to use the dataSource.hostGrid.setSort-method to update the sorting of the dataSource when I change the data input, but this doesn't seem to be working reliably.
@shlomiassaf what is the recommended way to handle my scenario. Should I reuse the dataSource or do I have to create a new one for the new data input? How can I propagate the changes of the matSort properties to the dataSource?