SF Grid with AllowGrouping equals to "true" is NOT working - Grouping is not allowed

Question

Dear All,I am learning Blazor and am also using Syncfusion.Blazor.Grids library. I even used the example posted on Syncfusion documentation website:https://blazor.syncfusion.com/documentation/datagrid/grouping I copied the entire code of Orders example to test and see if AllowGrouping would work for this example, but, it did not. Here is part of the code from that hyperlink above: My development environment:- OS: Windows 11- Visual Studio 2022- Framework: .NET 7.0 Core- Data store: MS SQL Server 2022- Library: Syncfusion.Blazor.Grids (22.2.12)- Library: Syncfusion.Blazor.Themes (22.2.11)- Project template: Blazor Web Assembly- I could not drag a column header into the group section above the column headers to group them. I don't know if this has anything to do with .NET Core 7.0. Please assist. Thank you.

Monisha Saravanan · Answer

Hi Khoi,Greetings from Syncfusion.We suspect that the reported issue is due to the improper reference of scripts. Kindly refer the style and scripts using any one of the below suggested way and check the reported issue at your end. Or you can use the below Additional reference: CDN Scripts- https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference Styles - https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference Static Web Assets Scripts - https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets Styles - https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets If you still face difficulties then kindly share the below details to proceed further at our end. Share us the entire Grid code snippet along with model class Share us the video demonstration of the reported issue. If possible share us an simple sample with duplicate database so that we will try to modify the shared sample as per your requirement. The above requested details will be very helpful for us to validate the reported issue at our end.Regards,Monisha

KHOI NGUYEN · Answer

Hello Monisha,I used the following link reference, script source and component type per your instruction in the index.html under wwwroot: I also removed this old reference that I have:I think the tutorial reference was for older bootstrap 4 which was available at the time this tutorial was released.I just want to know what the does.Again, it works great. Thank

KHOI NGUYEN · Answer

Hi Monisha,I also went back trying to remove each of the following below references:and I came to a conclusion that in order for the dragging the column header in the ShowDropArea to work for data grouping, the script of syncfusion-blazor.min.js must be used. Otherwise, the dragging of column header will not work. The tutorial series did not mention the usage of this syncfusion-blazor javascript library. I guessed this was introduced later in the .NET Core 7.0. In any case, thank you so much for your quick response. This also fixed another problem:The selection of the dropdown list to display the number of rows (records) per page. It did not work before referencing this syncfusion-blazor javascript library. Thank you once again.

Monisha Saravanan · Answer

Hi Khoi,Most Welcome!Query: “ I came to a conclusion that in order for
the dragging the column header in the ShowDropArea to work for data grouping,
the script of syncfusion-blazor.min.js must be used. ”Yes, you are correct. We need to refer scripts in our
application to perform client side actions. We are happy to hear that the
reported issue ahs been resolved. Kindly get back to us if you have further queries.
As always we will be happy to assist you.Regards,Monisha