Toggle Edit Mode
As of the R3 2024 release, the Telerik UI for ASP.NET MVC Grid enables you to toggle its editable state. The feature provides the ability to switch the Grid between Readonly and Editable mode. The Grid can be initialized in either of the states and they can be toggled on the client-side, depending on the application logic.
For a runnable example, refer to the Grid Toggle Edit Mode demo.
Setting the Readonly Mode
To enable the Readonly mode, use the Editable.Readonly() configuration method.
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice).Width(140);
columns.Bound(p => p.UnitsInStock).Width(140);
columns.Bound(p => p.Discontinued).Width(100);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(150);
})
.ToolBar(toolbar =>
{
toolbar.Create();
})
.Editable(editable => editable
.Mode(GridEditMode.InLine)
.Readonly(true)
)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
.Model(model => model.Id(p => p.ProductID))
.Create("Editing_Create", "Grid")
.Read("Editing_Read", "Grid")
.Update("Editing_Update", "Grid")
.Destroy("Editing_Destroy", "Grid")
)
)
Toggling the Edit Mode
The Telerik UI for ASP.NET MVC Grid allows you to programmatically alter the editable state of the component through the following methods:
-
disableEditing()—Disables editing operations. -
enableEditing()—Enables editing operations.
$(document).ready(function(){
// Determine whether either of the methods should be invoked.
$("#grid").getKendoGrid().disableEditing();
$("#grid").getKendoGrid().enableEditing();
})