New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Make Grid Columns Conditionally Editable

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I make specific Grid columns editable or non-editable based on condition?

Solution

The columns in the Telerik UI for ASP.NET MVC Grid provide the Editable property that accepts a JavaScript function name.

By default, the current dataItem is passed to the JavaScript method as an argument. You can use this argument to access the values of the respective model.

The following example demonstrates how to enable or disable the editing of the ProductName column based on the value of the ProductID field.

Add the Editable property for a Grid column and specify the name of the JavaScript method.

Razor

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName).Editable("productNameEditable");
        ... // Other columns.
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.ProductID))
        ... // Settings omitted for brevity.
    )
    ... // Settings omitted for brevity.
)

Add logic in the JavaScript function to determine if the column must be editable.

<script>
    function productNameEditable(dataItem) {
        // Do not allow editing of "ProductName" field for the record with "ProductID" that equals "3".
        return dataItem.ProductID != 3;
    }
</script>

Make Grid Columns Conditionally Editable

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also