This is a migrated thread and some comments may be shown as answers.

Disable grid tool bar buttons

1 Answer 286 Views
Grid
This is a migrated thread and some comments may be shown as answers.
shaneed
Top achievements
Rank 1
shaneed asked on 23 Jan 2014, 12:02 PM
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


1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 23 Jan 2014, 04:30 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
shaneed
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or