Disable grid tool bar buttons

[shaneed]

Hi,
   How can we disable toolbar buttons?  I have tried adding "k-state-disabled" and removing "k-grid-add", then on clicking Create button won't create a new row, but instead it is an anchor it is going to another page.  Generated htmlcopied from browser

<a href="#" class="k-button k-button-icontext k-grid-add"><span class="k-icon k-add"></span>New ad unit</a>

  Another thing is we have drop down menu (using template) in toolbar, how to disable that one?  Attached screen shot of dropdown menu.  Html for same is

<a href="#" class="k-button k-button-icontext k-grid-add"><span class="k-icon k-add"></span>New ad unit</a>

Thanks
Shan

[Dimiter Madjarov]

Hi Shaneed,


In the current scenario, you could either use the current approach with removing the k-add class and also prevent the click event of the link, so that it does not navigate to another page or use some alternative. For example, you could add a custom class to the button, bind to it's click event and check whether the custom class is applied. If that condition is satisfied, you could cancel the editing of the current row via the Grid's API.
E.g.

<button class="disable">Disable</button>

<script type="text/javascript">
$(".disable").on("click", function () {
    $(".k-grid-add").addClass("disabled");
});

$(".k-grid-add").on("click", function (e) {
    if ($(this).hasClass("disabled")) {
        setTimeout(function () {
            $("#Grid").data("kendoGrid").cancelRow();
        });
    }
});

</script>

Regarding the DropDownList, you should get the widget instance via the jQuery data method and disable it via it's API.

Regards,
Dimiter Madjarov
Telerik