Disabled Button

The business logic of an application often requires a certain button to be temporarily disabled or enabled.

You can initially configure the Button as disabled through its .Enable() setting. additionally, you can enable or disable the button at any time with javascript by using its enable() method with a Boolean argument.

The following example demonstrates how to enable and disable the Button through the enable attribute.

Razor

    @(Html.Kendo().Button()
        .Name("disabledButton")
        .Enable(false)
        .Content("Disabled button"))

Razor

    <kendo-button name="disabledButton" enable="false">Disabled button</kendo-button>

To disable the Button, you can also use the ViewData or ViewBag attributes. The example below illustrates a disabled Button through the ViewData attribute.

Razor

    @(Html.Kendo().Button()
        .Name("disabledButton")
        .Enable((bool)@ViewData["IsEnabled"])
        .Content("Disabled button"))

Razor

    <kendo-button name="disabledButton" enable='(bool)@ViewData["IsEnabled"]'>Disabled button</kendo-button>

C#

    public ActionResult Index()
    {
        ViewData["IsEnabled"] = false;
        return View();
    }

At runtime, you can disable the Button at with JavaScript by using its enable() method with a Boolean argument.

Razor

@(Html.Kendo().Button()
        .Name("editButton")
        .Content("Edit")

Razor

    <kendo-button name="editButton">Edit</kendo-button>

JavaScript

    <script>
        var isAdmin = false;
        var buttonWidget = $("#editButton").data("kendoButton"); // Use the [`jQuery.data()`](http://api.jquery.com/jQuery.data/) configuration option to get an instance of the Button TagHelper
        if(!isAdmin) {
            buttonWidget.enable(false); // disable the button
        } else {
            buttonWidget.enable(true);  // enable the button
        }
    </script>

Referencing Existing Instances

To reference an existing Button instance, use the jQuery.data() configuration option. Once a reference is established, use the Button client-side API.

See Also

• Basic Usage of the Button HtmlHelper for ASP.NET Core (Demo)
• Using the API of the Button HtmlHelper for ASP.NET Core (Demo)
• ButtonBuilder Server-Side API
• Button Server-Side API