Datagrid String Filter malfunction or not working at all

[kaliopane]

Describe the bug

The issue resides in the fact that after we fetch the data that we want to populate cells with from an endpoint, and create a datagrid, after filtering the results of a specific column (let's name it 'name') by providing a string that does not exist in the column (some gibberish data), and clearing the filter afterwards, no data is populating the datagrid.
If we filter based on an existing string, then no problem arises.

The example I've given in Stackblitz vaguely represents the issue I have. It has another issue however - the applied string filter does not work at all.

How to reproduce

The example is based on an already opened bug.
link to Stackblitz

Steps to reproduce the behavior:

1. Go to the Name colum filter and click it
2. Enter some data
3. Observe that even when entering strings, subset of items present in the name of some column, no result is shown after the filter is applied
4. After clearing the filter, we observe that no results actually populate the datagrid

Expected behavior

Versions

App

• Angular: [9.1.12]
• Node: [10.19] - locally
• Clarity: [3.1.7]

Device:

• Type: [MacBook]
• OS: [Mojave]
• Browser [FF]
• Version [80.0.1]

[hippee-lee]

This seems more like a question about how to implement server driven datagrids. The stackblitz provided seems to mock a backend response but I'm confused for how it filters items in the clrDgRefresh method using the state.

Here is an example that implements a server driven datagrid and mocks the backend. Filtering / sorting etc is already set up.

In a real application, a network call is made to the server that handles the filtering, sorting and pagination with the state information passed when the network call is made. When the response is resolved, the datagrid item list is updated for that state.

I'm going to convert this to a discussion because it is related to implementing a server driven datagrid and not directly related to an issue with the datagrid itself. Let me know if I am missing something here and I am happy to adjust accordingly.

[kaliopane]

Thanks for the update, Matt!

I got rid of the semi-implemented server side datagird, and got this in its stead: Link to Stackblitz

Maybe I was looking at the wrong place, as after Clarty 1 to 3 upgrade I found that filtering and sorting fails the whole datagrid (nothing is visible in the datagrid after a few sorting or filtering operations. Strangely, the footer shows always the correct number of items present at the specific moment).

That is why I'm shifting my attention at another component I've integrated.
By having a toggle, I expect that whenever the toggle is 'on', the datagrid would be filtered by a specific string, in my current case, by color.
Here, I expect that the datagrid would be able to filter, and/or sort by specific columns, but it's not happening.

[kaliopane]

I've recreated the problem I was struggling with locally.

Here is the final version of the Stackblitz example

Click on the input "scroller" above the datagrid. This will filter the datagrid by the color "Black".
After results are filtered, try to use other column filters or sort by other parameters.

You will find that after a few sortings / filterings, the datagrid becomes empty, no results are visible, but the footer shows the correct number of elements that ought to be displayed in the datagrid.

[gnomeontherun]

When I turn Ivy on, the Datagrid filtering seems to work fine. We've seen some issues with turning off Ivy (and the Angular compatability layer). There might be a fix in the works #5117 that helps, but turning on Ivy should also help.

[bdryanovski]

This issue is resolved in 3.1.10 and above.