Search results

Disable editing for a particular row/cell in ASP.NET Core Grid control

13 May 2021 / 1 minute 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.

tagHelper
disable-edit.cs
Copied to clipboard
<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>
Copied to clipboard
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.

tagHelper
disable-edit-batch.cs
Copied to clipboard
<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>
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}