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
dataBoundevent, obtain a reference to the button. - Use the
setOptionsmethod 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.
.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");
})
<script>
function dataBound(ev) {
let grid = this,
commands = grid.content.find(".k-command-cell").children("a"),
editable = grid.options.editable,
toggleButton = $(".k-grid-toggleEditable");
toggleButton.click(function (e) {
e.preventDefault();
if (editable) {
// Disable edit mode if the grid is currently editable.
grid.setOptions({ editable: false });
} else {
// Enable editing. Available options: inline, incell, popup.
grid.setOptions({ editable: "inline" });
}
});
// Change the text of the button depending on the grid state.
editable ? toggleButton.text("Toggle Readonly") : toggleButton.text("Toggle Editable");
// If the grid is not editable disable the column commands.
commands && !editable ? commands.addClass("k-disabled") : commands.removeClass("k-disabled");
}
</script>