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.

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");
})

JavaScript

<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

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base