Disable editing for a particular row/cell

17 Feb 20223 minutes to read

You can disable the editing for a particular row by using the actionBegin event of Grid.

In the below demo, the rows which are having the value for ShipCountry column as Denmark is prevented from editing.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Edit", "Cancel", "Update" })" actionBegin="actionBegin">
    <e-grid-editsettings allowEditing="true" mode="Normal"></e-grid-editsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="150"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
        <e-grid-column field="Freight" format='C2' headerText="Freight" width="150"></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="ShipCountry" width="250"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
    function actionBegin(args) {
        if (args.requestType === "beginEdit") {
            if (args.rowData.ShipCountry == "Denmark") {
                args.cancel = true;
            }
        }
    }
</script>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

For batch mode of editing, you can use CellEdit event of Grid. In the below demo, the cells which are having the value as “Denmark” is prevented from editing.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Edit", "Cancel", "Update" })" cellEdit="cellEdit">
    <e-grid-editsettings allowEditing="true" mode="Batch"></e-grid-editsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="150"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
        <e-grid-column field="Freight" format='C2' headerText="Freight" width="150" ></e-grid-column>
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="250"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
    
<script>
    function cellEdit(args) {
        if (args.value == "Denmark") {
            args.cancel = true;
        }
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}