Disable the Command Button in Grids

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	2017.3.913

Description

I want to render the command buttons of the Grid cells for the user to see, but to disable them depending on the @User.IsInRole("RoleName") status. I tried to achieve this behavior by using Javascript and adding the k-disabled class but the buttons are still clickable.

How can I disable the command.Edit() or the command.Destroy() button?

Solution

Apply the logic on the dataBound event and use jQuery.

1. Set the k-disabled class.
2. Only on the disabled buttons, remove the delete and edit specific classes.

    <div id="grid"></div>
    <script>
      $("#grid").kendoGrid({
        dataBound:function(e){
          $( ".k-disabled" ).each(function( index ) {
            $(this).removeClass('k-grid-remove-command')
            $(this).removeClass('k-grid-edit-command')
          });
        },
        columns: [
          { field: "name" },
          { command: [{ className: "k-disabled", name: "destroy", text: "Remove" },{ className: "k-disabled", name: "edit", text: "Edit" }] }
        ],
        editable: true,
        dataSource: [ { name: "Jane Doe" } ]
      });
    </script>