Edit this page

Disable the Command Button in Grids

Environment

Product Progress Kendo UI Grid
Made with 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-state-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-state-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-state-disabled" ).each(function( index ) {
            $(this).removeClass('k-grid-delete')
            $(this).removeClass('k-grid-edit')
          });
        },
        columns: [
          { field: "name" },
          { command: [{ className: "k-state-disabled", name: "destroy", text: "Remove" },{ className: "k-state-disabled", name: "edit", text: "Edit" }] }
        ],
        editable: true,
        dataSource: [ { name: "Jane Doe" } ]
      });
    </script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy