Preventing the User from Removing the Initial Groups, Changing their Order, or Adding New Groups

Environment

Product	Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version	Created with the 2023.3.1010 version

Description

How can I prevent the user from moving the initially added groups of the Grid, changing their order, or adding new groups?

Solution

1. Create a Grid with initial groups.

2. Handle the Group event of the Grid.

3. Within the Group event handler, get the current Grid groups by using the group() method of the DataSource.

4. Check if the number of initial groups matches the number of current groups and if the first initial group matches the current first group and prevent the default event action if this condition is not met.

   Razor

       @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
           .Name("grid")
           .Groupable()
           .Events(ev => ev.Group("onGroup"))
           .DataSource(dataSource => dataSource
               .Ajax()
               .Group(groups => 
               {
                   groups.Add(p => p.UnitsInStock);
                   groups.Add(p => p.UnitsOnOrder);
               })
               ...
           )
           ...
       )

   Razor

       @addTagHelper *, Kendo.Mvc
   
       <kendo-grid name="grid" on-group="onGroup">
           <datasource type="DataSourceTagHelperType.Ajax">
               <groups>
                   <group field="UnitsInStock"></group>
                   <group field="UnitsOnOrder"></group>
               </groups>
               <!-- Other configuration -->
           </datasource>
           <groupable enabled="true" />
           <!-- Other configuration -->
       </kendo-grid>

   Html

       <script>
           function onGroup(e) {
               var currentGroups = e.sender.dataSource.group(); // Get the current groups.
               if(currentGroups.length > 0) {
                   if((currentGroups.length != e.groups.length) || (currentGroups[0].field != e.groups[0].field)) { 
                       // Prevent the Group event.
                       e.preventDefault();
                   }
               }
           }
       </script>

For a runnable example based on the code above, refer to the following REPL samples:

• Sample code with the Grid HtmlHelper
• Sample code with the Grid TagHelper

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core

• Server-Side API Reference of the Grid for ASP.NET Core

• Server-Side TagHelper API Reference of the Grid for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base