Multiple live views of same dataset with different filters

Using SfDataGrid

The requirement is to display the same set of data in 4 tables (or perhaps 4 groups). The table (or group) that a row should be displayed in is determined by the value of a property on each row called "Flag".

atlas split tables.jpg

Note that this Flag value can change. For example if I change the value of Flag from 1 to 2, I would expect to see the row move from the 1st table to the 2nd table in realtime. Additionally if new items are added to the master collection I would expect them to appear in the relevant table.

Visually, all 4 tables need to be displayed at the same time on screen and each one must be scrollable. There were two approaches I was considering, I am looking for the best way to achieve the above:

Grouping

I thought this might be easiest to do by just grouping the data by Flag, however I would need to be able to style each group so that the rows in each group are in a scrollable container with a maximum height.

Multiple collection views on the master dataset

Another approach I considered was making multiple datagrids, where each datagrid is a bound to an ICollectionView showing a different filtered version of the live dataset. Not sure exactly how I would achieve this and there seems to be much more complexity around this approach. I would also like to use the text search functionality and I'm not sure if that would affect the applied filters on each collection view.


Please let me know how I would best achieve this. Thanks.


2 Replies

MS Malini Selvarasu Syncfusion Team June 26, 2024 03:35 PM UTC

Hi Z S,
We are currently analyzing your reported scenario and need more time to validate the scenario. We will provide an update on or before June 28, 2024.

Regards,

Malini Selvarasu



SP Sreemon Premkumar Muthukrishnan Syncfusion Team June 28, 2024 03:09 PM UTC

Hi Z S,

We have analyzed your requirement and implemented it by grouping the rows based on the Flag with SfDataGrid.LiveDataUpdateMode set to AllowDataShaping. When you add a new row or modify the flag value of an existing row at runtime, it will move to the respective flag group.

We have prepared the sample with the video reference. Please find it in that attachment.

However, we are a little unclear about your requirement regarding the scrollable container with the group you mentioned. Could you please provide more information and an image reference for this scrollable container? This will help us validate it and provide a solution based on that.

Regards,

Sreemon Premkumar M


Attachment: SfDataGrid_Customization_b171243e.zip

Loader.
Up arrow icon