New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Toggle Grid Editable Mode On And Off
Environment
Product | Telerik UI for ASP.NET Core Grid |
Description
How can I toggle the editable mode of the Grid by using a button in the ToolBar of the Telerik UI for ASP.NET Core Grid?
Solution
The Telerik UI for ASP.NET Core Grid options can be modified through the setOptions
method.
- Create a custom button in the Grid's toolbar.
- Inside the Grid's
dataBound
event, obtain a reference to the button. - Use the
setOptions
method to set the editable mode of the Grid when the button is clicked. - Change the text of the button to reflect the current state of the Grid.
- (Optional) If the grid has a command column, disable all of the commands when editable is false.
Razor
.Columns(columns =>
{
columns.Bound(c => c.Id);
columns.Bound(c => c.Property);
columns.Command(c => c.Edit());
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Events(events => events.DataBound("dataBound"))
.ToolBar(t =>
{
t.Custom().Name("toggleEditable").Text("Toggle Readonly");
})