Setting sorting column programmatically works but does not update the arrow in the column header

[Michal Turecki]

What is the expected behavior?

Arrow should be shown when calling the dataSource.setSort method i.e.:

this.dataSource.setSort(this.columns.table.cols[0], { order: 'desc' });

What is the current behavior?

Grid contents are correctly sorted but without visual indication of the column and order.

What are the steps to reproduce?

https://stackblitz.com/edit/pebula-ngrid-starter-rsrw8t
Changing sorting in the ngOnInit does not work either.

[Shlomi Assaf]

That's because you're setting the sort before the grid is event created, only the datasource is created.

The UI sorting functionality is provided by material's MatSort component which has it's own way of setting the active sort.

See this demo page, take a look at the second example.

<pbl-ngrid matSort matSortActive="name" matSortDirection="desc"
                   [dataSource]="ds" ]="columns"></pbl-ngrid>

With this, you don't need to call it from code

[Michal Turecki]

Indeed it works fine when using matSortActive and matSortDirection attributes, thanks for the tip. This feature can be also dynamic when binding so setting sorting from code is not really essential, I'll leave the bug for you to close.

[Shlomi Assaf]

I guess it makes sense to also support this, and it should not be a big task.

This is specific to the sort plugin in the ngrid-material package, it doesn't propagate because there is not check for it when it initialize... it only listens to future events of sort change and doesn't handle any current sort state.

See this code

The code is a bit complex because sort events come from multiple sources... it can come from the datasource initiating it, or a user click event initiating it.

Each source will change the sort so it will be followed by another source firing the event so this must be handled with proper state to avoid multiple updates that are not required.

I'll get to this at some point...