Grid Edit/Delete/Update buttons template

[Hammad]

Hi,

can we edit the templates/css of command buttons in Grid? like Edit/Update/Delete

I want to remove the background of these buttons and the text so only the icons are shown

[Alexander Valchev]

Hi Hammad,

You can remove the text of the command buttons through the configuration settings. The syntax is the following:

columns: [
    //columns
    {
        command: { name: "destroy", text: ""}, //sets the text of the "Delete" button to an empty string
        title: " ",
        width: "110px"
    }
]

Regarding to the background icons, I suggest to change them using CSS styles. All you need to do is to override the corresponding rules. 
For convenience you may check this example - it shows the suggested approach in action.

Regards,
Alexander Valchev
the Telerik team

[Hammad]

Hi Alexander,

your demo worked, but i had to do a little modification in css, added background:none and border:0px in

.k-grid tbody .k-button {
    min-width: 22px;
    width: 22px;
    background:none;
    border:0px;
}

though your code worked 100% correctly in jsFiddle, not sure why i had to do these modification on my system

Thanks