Add [(clrDgFiltered)] to expose items in Datagrid matching current filters

[amellnik]

[ ] bug
[x] feature request
[ ] enhancement

Proposed behavior

Currently we have [(clrDgSelected)] which exposes the subset of selected rows in a Datagrid. It would be nice to have an analogous two-way binding to see the items which are shown in the Datagrid after filters are applied.

Actual behavior

I don't think there's any way to do this currently without using selection. An example of why this would be useful is a Datagrid that is tied to a plot of some portion of the data. Filtering the Datagrid to a subset of the data could then also filter the data in the plot.

Reproduction of behavior

n/a

Environment details

• Angular version: 2.0.X

• Clarity version: all

• OS and version: all

• Browser: all

[youdz]

This is a completely valid request, we never thought of it.

The one issue I foresee before implementing this is that we can give you access to the list of items currently displayed, in order, but that will be restricted to the current page. We have no way of giving you the whole list of items that pass the selected filters even if they are in subsequent pages, because we simply cannot promise to compute it.
Typically, if you're displaying 10 items on the first page of a 10.000 rows datagrid, we will not (in the future) filter the entire 10.000 items. We will probably use a smarter algorithm that sorts and filters at the same time, and stops as soon as it has filled the currently displayed page.

So in your example of plots, I'm afraid that if you want to display the graph for all items passing the filters, you'll have to do this yourself by listening to (clrDgRefresh) and applying the filters given in the DatagridState. If you want to display the graph only for currently displayed items, then you should be able to use this feature as soon as we implement it.

[amellnik]

Thanks for the thoughtful answer, @youdz! I will go ahead and plan on using (clrDgRefresh) and DatagridState.

Just wondering -- does this mean that in the future pagination won't provided an exact number of items and pages remaining after filters are applied for very large sets?

[youdz]

Just wondering -- does this mean that in the future pagination won't provided an exact number of items and pages remaining after filters are applied for very large sets?

It's a compromise we might want to offer when the performance gain is worth the lack of precision. Although at that point, I really recommend handling pagination on the server... But now that you mention it, we might want to make that trade-off a manual "opt-in", which means we could provide a separate incompatible feature which does what you're asking for (access to all items passing the current filters). Picking one or the other would be an informed choice, and we would document clearly the fact that you wouldn't be able to use both at the same time.

I'll discuss it with other team members and give it a little more thought, but it looks like you might get the full feature you required in the end. 😄

[amellnik]

Hi @youdz, two further questions on this -- is there a way to manipulate DatagridState directly at the moment? I'm trying to do two other related things:

• Push filters to it from the controller (including possibly adding a filter for a column which is not shown).
• Remove filters along with the column when the user removes the column.

[youdz]

Right now, there is no way for you to manipulate the global state. The way to play with filters at the moment is simply to add or remove them on a column level.

As a side note, if the filters from a column are not cleared when the column is hidden, that probably a bug on our side. I'd have to check.

[amellnik]

@youdz -- Sorry for the confusion -- I checked and confirmed that removing a column also removes any associated filters, so this is fine.

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

[youdz]

Ok, we will address this soon.

For now, the plan is to simply publicly expose the list of displayed items and the list of all filtered items (in sort order) on the Datagrid itself. These will then be easy to access with @ViewChild or dependency injection.

[franckstifler]

What is the state of this please? We need to have something like the [(clrDgFiltered)] in other to render some total based on filtered columns.

[alexej-strelzow]

That feature would be really awesome.
I have a table with > 1000 items and on top I show some statistics. If the user uses a string filter on a column then the table changes but my statistics are wrong. I've tried to use the refresh hook + ViewChild for DataGrid, but it's not really an alternative. The private stateProvider can deliver the items inside the gird, but ..no.. just no.

I'd be very happy to have this additional binding :)

[cloud9amit]

Hey Guys,

As i see you are already maintaining the count of datagrid rows based on filtered data using [clrDgTotalItems], why can't we expose a two way binding to get the current visible filtered records on the dataGrid which span to multiple pages.
I have a requirement where we want to do an operation on all the rows currently visible on a datagrid which span to multiple pages. But once filter is applied we loose the visibility on currently displayed data on the grid. Since selectAll also applies selection only on currentPage so not able to find any workaround for this.

[gnomeontherun]

The only workaround I see here is to treat your datagrids as server-driven so the application manages the list of items. You lose the built-in filtering and have to handle that yourself, but it also opens up more customizations.

This is a worthwhile enhancement request, but is challenging to implement due to the existing behaviors and nature of Clarity Angular. As we build out Clarity Core, this should be possible to realize with the applications managing the state and functionality more directly instead of Clarity Angular.

In an effort to clean up our backlog and focus our attention, I’m going to close this as something that will be easier with implementations in Clarity Core. Please follow our development and releases to see when we release relevant components to make this possible.

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