I am looking to add search functionality to my ListView component, similar to the one in the demo in the documentation here.
However, I believe the demo modifies the data source of the ListView, causing any changes made to components within the ListView to be overwritten. For example, if I click on the 'Enabled' checkbox for a user (say Rosemary Rogers) and then search for "Rosemary Rogers", the enablement I did before the search is undone as a result of the search.
Is there a way I can perform the search without undoing the changes made to the ListView components?
For example, is there a way to "hide" a ListView item if the search term does not match the data, and then change this dynamically according to the search term such that deleting the search term causes the hidden item to be visible again (along with all the changes to the item component)?
One workaround I can think of is saving every change made by the user to the source data so that refreshing the ListView during the search preserves the changes. However, this a) is not ideal from an engineering perspective if the changes are not final, and b) can get complicated if the structuring of the data within the component is complex (e.g.: a checkbox list instead of just a single checkbox in each ListView item:
Could you please share the code for how you hid the individual cards in the ListView based on the search? Just setting .hidden = true didn't work for me.
Also - when the cards are hidden there is blank space where they used to be, which causes gaps in the cards and isn't ideal visually. Is there a way to make the blank spaces disappear so that the filtered cards appear one after the other without any space?
Hi Shubham, thanks for your feedback with the new list view!
When filtering objects in your List View, we recommend filtering on the datasource level so that your datasource includes only the data you want to display.
If you select a Primary Key for your datasource, then we can identify which instance is which through filtering and it should preserve the state of your components. Can you let me know if that helps with your use case?
Are you suggesting making a copy of the datasource and filtering on the copy so that the original state of the datasource is preserved?
Or are you talking about filtering on the original data source and changing the filtering dynamically based on the search term?
In the latter approach, where does the state get preserved unless I write back to the data source (e.g.: when a checkbox is selected)?
Do you have a working example whose code you can share?
Here's the link of the app I'm working on if it helps to see my use-case in addition to the screenshot I shared earlier.
Thanks for letting me know. Experimenting with the app now a little, running into this error: storeChanges failed (0.004s):Cannot access checkbox1 from storeChanges. checkbox1 is on page2. storeChanges is global.
Is this the issue with storing changes you are talking about? I am on v1 by the way ( Playground.json (26.2 KB)
)
actually it is a not related error, i just refresh the page and the error solves itself, i have already created a topic Table1 is on Page2 Error.
storeChanges only stores the changes into a variable.
V2 have the store to DB functionality, but if you have many records, the performance will be affected
I recommend V2, it has the storeChanges issue fixed
I think there may be an error with the way the state is being saved in the ListView:
In the example above:
I am checking the boxes for Durrett Adrien, Upward Pandora, and Rogeon Pepi.
Then, I search for "adr", causing Durrett Adrian to show up and have that box be checked (as expected).
When I delete the search term, i.e. change from "adr" to "ad", the filter causes a few more names to show up. However, some of these boxes are checked even though I never clicked on them initially (e.g.: Kenafaque Adelind and Radleigh Donnie).
Hello, it seems that the GridView component isn't reflecting updates properly when the data source changes. As you can see, item with index 2 is not affected when applying the filter, or maybe is my way of filtering the data source not the best.
This could be also a bug or an unusual behavior within the GridView component (since is a new component).
I find the functionality to be somewhat complex, at least for me. I'm uncertain whether there might be a more efficient approach to handling this situation. Maybe the guidance from experts is required
Hi @shubham and @Oscar_Ortega, thanks for reporting this! I'm looking into it now, you're correct that there is some unexpected behavior with state changes when filtering in a List View. I'll work on a fix and update with any updates as well as additional features we'll add to help with filtering.
For now, if you write back user changes to a datasource, that's the best way to keep track of state changes. Here's a GIF and a JSON of an example I got working! List View Filtering.json (13.4 KB)
