Remove k-button class from kendogrid command butto

I am using edit, destroy buttons in kendogrid. These are rendered as buttons, but if I remove k-button class, these can be rendered as just icons.

Is it possible to remove the k-button class from all these buttons?

Yes, I had the same issue a while back. How I achieved this was by defining a template for the command buttons.

{"command": [
    {
      "text": "Edit",
      "template": "<a role='button' class='k-button k-button-icontext k-grid-edit'><span class='k-icon k-i-edit'></span></a>"
    },
    {
      "text": "Delete",
      "template": "<a role='button' class='k-button k-button-icontext k-grid-delete'><span class='k-icon k-i-close'></span></a>"
    }
  ]
}

You might now be wondering how the delete and edit functions are bound to these custom buttons. The magic happens with the classes k-grid-delete and k-grid-edit I believe these are the classes kendo also uses to bind to its own functions.

If you need to bind to a custom edit/ delete function that is possible too. Refer the columns.command.click documentation

Here is a working example

UPDATE

In order to mimic the update and clear functionality you can use a combination of command templates and grid methods

Here is an updated example

Notice how I have utilized the command.click method to programmatically manipulate the rows and show/hide the command buttons as needed with jQuery.

{
  name: "cust-edit",
  template: "<a role='button' class='k-button k-button-icontext k-grid-cust-edit'><span class='k-icon k-i-edit'></span></a>",
  click(e){
    var grid = $("#grid").data("kendoGrid");
    var tr = $(e.target).closest("tr"); // get the current table row (tr)
    grid.editRow(tr); //manually trigger edit on row
    $(tr).find('.k-grid-cust-edit, .k-grid-delete').hide();
    $(tr).find('.k-grid-cust-update, .k-grid-cust-clear').show();
  }
}

Also dont forget the CSS snippet introduced to hide the save update and clear changes buttons one page load.