Update Cancel Template in Grid

[Randy]

I need to make more room for columns in my grid, so I am trying to change from big buttons for edit, delete, update and cancel to icons. I can get all of the icons to show right with a little CSS

/* Grid Buttons, remove background and change icon */
span.k-delete {
    background: url("../images/Delete.gif") center center;
}
span.k-edit {
    background: url("../images/Edit2.png") center center;
}
span.k-update {
    background: url("../images/save.gif") center center;
}
span.k-cancel {
    background: url("../images/cancel.png") center center;
}
.k-grid .k-button-icontext .k-icon {
    margin: 0;
    vertical-align: middle;
}
.k-grid tbody .k-button {
    min-width: 22px;
    width: 22px;
    background:none;
    border:0px;
}

plus the column def of:

{

                        command: [{ name: "edit", text: "" }, { name: "destroy", text: "" }, { name: "update", text: "" }, { name: "cancel", text: ""}],
                        title: "",
                        width: 100
                    }

The problem is all four of the buttons show when the grid is not in edit more (inline) and only the update and cancel show when in the edit mode, but they show with the text. Meaning the CSS is working, but the column def isn't doing anything during edit mode.

How do I setup one set of command columns for edit mode and one set for non-edit mode.

What I currently have can be seen here:
http://jsfiddle.net/randyallen/Kfdmh/1/

A little better, no save button while not in edit mode:
http://jsfiddle.net/randyallen/Kfdmh/2/

Also is there a way of getting rid of the row level save / cancel button and just use the toolbar at the top of the grid?

Thanks
Randy

[Andrew]

First, I would set "editable: true".

Second, refer to my post at the bottom of this thread about deleting from top level.

Also refer to the replies in that same post by jc mag and alexander about keeping track of changes. You can then use that to hide/show certain button with css.

[Lee]

This doesn't seem to solve the issue of needing to create a template for the update/cancel buttons that appear when the user clicks edit. 

[Georgi Denchev]

Hello, Lee,

You can use the columns.command.text and columns.command.iconClass configurations to update the text and icon of the following 3 buttons:

• Edit
• Update
• Cancel

Here is a Dojo example demonstrating all 3 of them at once:

https://dojo.telerik.com/@gdenchev/itOGOpEz 

[David]

You can remove the text on the buttons by adding the following CSS:

a.k-button-icontext { 
     font-size: 0px;
}