[NG] Datagrid: URL-persisted state

[youdz]

Select one ... (check one with "x")

[ ] bug
[x] feature request
[ ] enhancement

Expected behavior

We should have an option that updates the query parameters of the URL to track the state of the datagrid. It would allow to hit previous/next in the browser to come back to visited pages, or undo a filter or a sort. More importantly, it allows the datagrid to navigate to a "details" page when an item is clicked, then come back with the "previous" button of the browser to the datagrid, in the exact same state as when the user left.

Since we can have multiple datagrids on a single page, the query param should be customizable to avoid conflicts. It would look like this:

<clr-datagrid [clrDgRouteName]="'users'">

And produce a url with query parameters users_page, users_sort, users_filter, ...

This is obviously a first draft and will depend on the complexity of the implementation

[amellnik]

How would this work with pages that are already using query/matrix parameters? Would it be easier to just expose a hash of all the datagrid settings? Also if the data shown in the table is dynamic, what should happen if invalid query parameters are supplied (users_page = 10 when there's only 9 pages, etc). Cool idea!

[pratheekhegde]

@youdz 👌🏻 Having named datagrids would be one decent way to avoid conflicts. Maybe the state of each datagrid can be represented like this.

interface State {
    routeName?: string; // or some other appropriate name
    page?: {
        from?: number;
        to?: number;
        size?: number;
    }
    sort?: {
        by: string | Comparator<any>
        reverse: boolean;
    };
    filters?: ({property: string, value: string} | Filter<any>)[];
}

Transforming the state into Matrix URL notation would be better I feel. For starters the [clrDgRouteName] could be implemented. Syncing it with the route params could be implemented in different ways so it can be left to the user. One simple methods could be with/without ngrx as explained by Victor Savkin here.

[johnstill]

Is there any update on this? I see that the Datagrid currently emits this state object whenever it is interacted with but there does not seem any straightforward way to set the sort or the filters objects when re-entering the component that contains the datagrid. I have pretty much the exact original use case; I'm using a server driven Datagrid to present the master part of a typical master / detail view, and the fact that there doesn't seem to be any way to view a detail page (or any other part of the app) without losing the state of the Datagrid is pretty frustrating. If I could set this state object directly that would be sufficient - then I could serialize / deserialize it from the URL, or session storage, or wherever. So if there's a way to do that I'd love to know about it.

[gssjr]

I'm looking for something similar. I have refresh(state: ClrDatagridStateInterface) dispatch an action to preserve the datagrid state in ngrx/store. When I initialize the component it'd be nice to have a way to easily set the state. Any ways to do this currently?

[gnomeontherun]

We've reviewed this recently and decided it is not likely to be a feature due to complexities (especially with multiple datagrids on the page). The better alternative is to focus on #2094 as an input/output that can be easily cached by the application instead of internalizing state like this.

Closing as something we won't be focusing on in order to help clean up backlog.

[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.