This is a migrated thread and some comments may be shown as answers.

Update Cancel Template in Grid

2 Answers 185 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Randy
Top achievements
Rank 1
Randy asked on 25 Apr 2012, 02:39 PM
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 {
    backgroundurl("../images/Delete.gif") center center;
}
span.k-edit {
    backgroundurl("../images/Edit2.png") center center;
}
span.k-update {
    backgroundurl("../images/save.gif") center center;
}
span.k-cancel {
    backgroundurl("../images/cancel.png") center center;
}
.k-grid .k-button-icontext .k-icon {
    margin0;
    vertical-alignmiddle;
}
.k-grid tbody .k-button {
    min-width22px;
    width22px;
    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

2 Answers, 1 is accepted

Sort by
-1
Andrew
Top achievements
Rank 1
answered on 21 May 2012, 05:43 PM
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
Top achievements
Rank 1
Iron
Veteran
Iron
commented on 20 Oct 2021, 03:23 PM

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
Telerik team
commented on 25 Oct 2021, 09:35 AM

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 

0
David
Top achievements
Rank 1
answered on 15 Jul 2012, 11:16 AM
You can remove the text on the buttons by adding the following CSS:

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

Tags
Grid
Asked by
Randy
Top achievements
Rank 1
Answers by
Andrew
Top achievements
Rank 1
David
Top achievements
Rank 1
Share this question
or