Preventing the User from Removing the Initial Groups, Changing their Order, or Adding New Groups
Environment
| Product | Telerik UI for ASP.NET MVC Grid |
| Progress Telerik UI for ASP.NET MVC 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
- Create a Grid with initial groups.
- Handle the
Groupevent of the Grid. - Within the
Groupevent handler, get the current Grid groups by using thegroup()method of the DataSource. -
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.
@(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); }) ... ) ... )<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 REPL example on preventing the user from removing or rendering the initial Grid groups or adding new groups.