Grouping via column menu much slower than same operation via drag/drop

[Giles Wakefield]

I have a blazor WASM app which uses the SF Grid to display results of various enquiries.  The class representing a row is a dynamic type as the enquiries can return variable numbers of columns so I cannot use a fixed class, but that aspect works ok, and the grid loads and can be sorted etc. fine.

I have added support for grouping in the grid, but for my app I don't want the "Grouping area" to always be visible as it takes up space, so I have implemented grouping via the column menu instead.  

However, I find the user experience of this is not great as it takes quite a long time to actually perform the grouping and re-draw the grid after you select the "Group by this column" option, and it leaves the context menu on-screen for a large proportion of this time. The amount of time seems to depend on the amount of data in the grid (understandable) but this is taking many seconds for me, even when the app is published with AOT enabled.

I have now discovered that grouping by enabling the group area and dragging the column header takes about half the time as doing so via the menu.

I have attached a sample project showing this behaviour.  If you group by a column via its column menu:

Then you will see it takes some time, and the app seems to be "frozen" for around 10 or more seconds on my machine.  If you then un-do that grouping and re-perform it by dragging the column header:

Then it takes around half the time.

The actual amount of time seems entirely proportional to the amount of data.  The attached sample has 200 rows and 15 columns, which I don't think is a ridiculous amount of data.

So:

• Is there anything I can to do speed up grouping generally?
• Is there anything I/you can do to at least make the pop-up menu disappear once the group option is selected, and show a spinner or similar "busy" cursor/image in the grid area whilst it's processing?
• Why is grouping so much faster when done via drag/drop than it is via the menu?

Kind Regards,

Giles Wakefield

Attachment: DynamicGrid2_c2f88d2d.zip

[Prathap Senthil]

Hi Giles,

Based on your shared sample the provided code snippet defines a class named SingleRowData that inherits from DynamicObject. it is not strongly typed or a POCO object ,so you will face unintended issues. Please note that our Grid component requires strongly typed objects or POCO object-type data for binding. This means that data binding must be based on a specific model type (class). This behavior is inherent to the default functionality of the grid. If the model type is unknown, we recommend using DynamicObjectBinding  or ExpandoObjectBinding . For more information on these binding options, please refer to the following documentation link:

Reference:
https://blazor.syncfusion.com/documentation/datagrid/columns#dynamicobject-complex-data-binding
https://blazor.syncfusion.com/documentation/datagrid/columns#expandoobject-complex-data-binding

And you have encountered issues with grouping performance. We recommend utilizing the lazy load grouping feature in the Syncfusion Blazor Grid. This feature enables you to employ lazy loading, a technique that dynamically loads data when needed, rather than loading everything upfront. Lazy loading can significantly enhance the performance of your application by reducing the initial load time.

Reference:
https://blazor.syncfusion.com/documentation/datagrid/lazy-load-grouping

Regards,
Prathap S

[Giles Wakefield]

Hi.  

I've modified my code to increase efficiency of the field lookups, and have enabled lazy load grouping and this does appear to be much faster.

I have checked the documentation regarding use of DynamicObject (which is actually at https://blazor.syncfusion.com/documentation/datagrid/data-binding#dynamicobject-binding and not at the link you gave) and I believe I'm basically doing as it shows in that documentation, though that example does not use grouping.

But Now if I try to expand one of the grouped rows it now throws an error:

I have updated to the latest SF nuget packages (was using 23, now v24) and it behaves the same.

Could you please tell me how to fix this?

I have attached the latest version of the code.

Thanks

Attachment: DynamicGrid2_bd971fe0.zip

[Prathap Senthil]

Based on the reported problem we suggest using the list datasource bind to the grid to avoid this problem, we suggest to using the below modified code snippet and sample for your reference.

public class GridData : DynamicObject

{

 

     public GridData(List<ColumnDef> columnDefs)

     {

         ColumnDefs = columnDefs;

         ColumnIdxLookup = columnDefs

             .Select(x => new { Name = $"__{x.Name}", Idx = x.Idx })

             .ToDictionary(k => k.Name, v => v.Idx);

     }

 

     /// <summary>

     /// This has the definitions of the columns in it...

     /// </summary>

     public List<ColumnDef> ColumnDefs { get; }

 

     public Dictionary<string, int> ColumnIdxLookup{ get; }

 

     public List<SingleRowData> RowData { get; set; }

}

    private GridData GenerateRandomData()

    {

        -------

       var rowData = rows.Select(r => new SingleRowData(gridData, r));

        gridData.RowData = rowData.ToList();

        return gridData;

    }

}

Attachment: DynamicGrid2_Modified_sample_b8c47148.zip