Enable disable grid and its actions in ASP.Net MVC Grid component

9 Jan 20254 minutes to read

You can enable or disable the Syncfusion^® ASP.Net MVC Grid and its actions by applying or removing specific CSS styles. This functionality is particularly useful in scenarios where interactions need to be restricted. Follow the steps below to implement this feature.

Step 1: Create CSS class with custom style to override the default style of Grid.

        .disablegrid {
            pointer-events: none;
            opacity: 0.4;
        }
        .wrapper {
            cursor: not-allowed;
        }

Step 2: Add/Remove the CSS class to the Grid in the click event handler of Button.

    <script>
        document.getElementById('element').onclick = function () {
            var grid = document.getElementById("grid").ej2_instances[0];
            if (grid.element.classList.contains('disablegrid')) {
                grid.element.classList.remove('disablegrid');
                document.getElementById("gridParent").classList.remove('wrapper');
            }
            else {
                grid.element.classList.add('disablegrid');
                document.getElementById("gridParent").classList.add('wrapper');
            }
        }
    </script>

In the below demo, the button click will enable/disable the Grid and its actions.

CSHTML

<div style="padding-bottom: 20px">
  @Html.EJS().Button("element").Content("Enable/Disable Grid").Render()
</div>
@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("348px").Columns(col =>
{
   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
<style>
    .disablegrid {
        pointer-events: none;
        opacity: 0.4;
    }
    .wrapper {
        cursor: not-allowed;
    }
</style>
<script>
    document.getElementById('element').onclick = function () {
        var grid = document.getElementById("grid").ej2_instances[0];
        if (grid.element.classList.contains('disablegrid')) {
            grid.element.classList.remove('disablegrid');
            document.getElementById("gridParent").classList.remove('wrapper');
        }
        else {
            grid.element.classList.add('disablegrid');
            document.getElementById("gridParent").classList.add('wrapper');
        }
    }
</script>

disablegrid.cs

public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}