New to Telerik UI for ASP.NET Core? Download 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.

  1. Create a custom button in the Grid's toolbar.
  2. Inside the Grid's dataBound event, obtain a reference to the button.
  3. Use the setOptions method to set the editable mode of the Grid when the button is clicked.
  4. Change the text of the button to reflect the current state of the Grid.
  5. (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>

More ASP.NET Core Grid Resources

See Also

In this article