Kendo UI Grid on Cancel event

Question

I am using the Kendo UI Grid Edit and Delete commands in order to manage data.

The issue I am running into is that I have a custom style that needs to be applied to the delete button. I am able to add the classes on the DataBound event, however when the user attempts to edit the data, the styling goes away on the button and it returns to the default Kendo UI styling.

---

Jquery used to add style

function onRowBound(e) {
    $(".k-grid-delete").removeClass("k-button k-button-icontext").addClass("btn btn-danger");
}

Kendo MVC Events

columns.Command(command => command.Edit()).Title("Edit");
columns.Command(command => command.Destroy()).Title("Remove")
.........    
.Events(e =>
       {
          e.DataBound("onRowBound");
          e.Cancel("onRowBound");
          e.Edit("onRowBound");
       })) 

---

I have tried having the same method fire on the Cancel event, but the style still reverts to the default one. Is there any way to set the style, preferably without using the "ClientTemplate" functionality?

Answer 1

Since kendoUI doesn't provide any mechanism to prevent change their style, the only way it's comming to my mind is to use SetTimeout function to change button style after kendo does. Change your onRowBoundFunction like that:

function onRowBound(){
    setTimeout(function(){
            $(".k-grid-delete").removeClass("k-button k-button-icontext").addClass("btn btn-danger");
    },1);
}

Working JSFiddle: http://jsfiddle.net/a6Ek2/10/

Answer 2

In my opinion, correct way to do this in not to remove kendo class but alter their styles for one that you want. Then if you wanna it for another grid you dont need to change the classes manually again. So, in your css you can use comma and write something like:

.btn, .k-grid .k-button {
    your properties
}

.btn-danger, .k-grid .k-button {
    your properties
}

I know that you have to alter a few .k-button properties of kendo button to look exacly but you want but i don't know the better way.

Answer 3

I don't know about MVC, but i can style the buttons like this. The code below is from the column definition of the grid. You can use the className and/or the attributes property.

{
    command: [{ text: "Edit", click: showDetails, className: "rebtn" },
    { text: "Request New Engagement", click: showEngagement }],
      attributes: {style:"padding:10px"},
      title: " ",
      width: "200px"

 }