Add meta data to ClrDatagridStateInterface to distinguish between user triggered actions and component responses

[aavelyn]

Summary

ClrDgRefresh emits the ClrDatagridStateInterface for two different reasons for which I propose a change to the interface, in order to be able to distinguish them.

1. Active datagrid changes by user

When the user clicks on sort, filter or any pagination elements, the resulting state change can be interpreted as an action, which needs a corresponding reaction (e.g. fetch new data)

2. Response that external state is set

When the user uses a separate component to filter data and the result of that request is displayed/binded to the datagrid, then the emitted state is mere a response.

A frequent use case I have is described in the use case section

• What is the change?

I propose to add the originating DOM Event to the ClrDatagridStateInterface, which states that the change originates from a event by the user from within the datagrid

interface ClrDatagridStateInterface<T = any> {
    ....
    originEvent: Event | null
}

• Why should it go in Clarity?

It affects @clr/angular directly

• Does this change impact existing behaviors? If so how?

It should not impact any existing behaviors.

Use case

I have a server driven datagrid without the smart iterator. Hence the pagination data is binded manually. I also use a separate filter component. Changes of the filter and the datagrid ClrDatagridStateInterface is updated to the url as query strings which triggers the data fetch. The result is binded to the datagrid.

The user navigates to page 2 via the pagination next button and we get a new ClrDatagridStateInterface. This user triggered change should update the url and trigger a data fetch.

The user now changes the filter and expects to start on page 1 of the new results. When I bind the results of the request to the datagrid, it emits as expected a new ClrDatagridStateInterface. This time however, the state should NOT update the url, which would trigger a new request.

Workarounds

Currently I'm using a custom directive to listen to the 'clrDgRefresh' event and emit its own 'refresh' event when it has detected a 'mousedown' event on one of the following elements

• pagination buttons, select and inputs
• column header sort buttons

PS:
My team and I are heavily using clarity datagrids for IoT projects, so a big thanks to clarity for providing such an amazing framework!

PPS:
I personally would love to contribute and solve this issues if approved.

[gnomeontherun]

This is an interesting request, and it lines up with the expected work in #2094. This sounds a bit challenging to do accurately, because you'd have to track this state in various places and different ways, so I don't see it as trivial. It sounds like your workaround is working well, so glad to hear it.

We're open to contributions and if you want to review this I'd welcome the investigation and possible PR!

[gnomeontherun]

There is a workaround available for this issue, and we recommend using it for Clarity Angular. We would consider a contribution to address this issue if someone is able to work out a solution. As we build Clarity Core implementations, we expect that this issue won’t be an issue or will be configurable on the application side. To help us clean up our backlog, we are going to close this with a functional workaround available and suggest you follow updates for Clarity Core for enhancements that can support your use case with Clarity Core components.

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.