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

How to show image only button for Destroy command button

4 Answers 725 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Motahera
Top achievements
Rank 1
Motahera asked on 09 Feb 2012, 12:09 PM
I have columns like following-
 columns: [
                            { title: "Task Id", field:"ProductID", width: "50px" ,template:'<a onclick="OpenTaskInTab(${ProductID})" href="Javascript:void(0);">${ProductID}</a>'},
                            { title: "Task Name", field:"ProductName"},
                            { title: "Budget", field: "UnitPrice", format: "{0:c}", width: "150px" },                            
                            { title: "Units", field: "UnitsInStock", width: "150px" },
                            { field: "Discontinued", width: "100px" },
                            { command: "destroy", title: "&nbsp;", width: "110px"  }],

For the command column I need a diff image and no 'Delete' or any other text. How to achieve that?

4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 13 Feb 2012, 05:58 PM
Hi Motahera,

Currently such feature is not supported out of the box. To achieve your goal you can manually remove the text via JavaScript:
var innerContent = $(".k-grid-delete").html().replace("Delete", "");
$(".k-grid-delete").html(innerContent);

To ensure that the code will be executed at the right time, I recommend you to use it on the dataBound event.

In order to change the button's image, you can override the corresponding CSS styles. For example:
span.k-delete {
    background: url("delete.png") center center;
}
/* centres the image */
.k-grid .k-button-icontext .k-icon {
    margin: 0;
    vertical-align: middle;
}
/* changes default width of the button */
.k-grid tbody .k-button {
    min-width: 22px;
    width: 22px;
}

Please check the attachment for working demo.

Greetings,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
ANIL
Top achievements
Rank 1
answered on 28 Jun 2012, 02:43 PM
Hi,

I have some issue similar to this, but the context is different, please help me on this.

I have a command column like as follows.

 { command: ["edit", "destroy", { text: "Reset", className: "Reset-button" }, { text: "Re-Register", className: "Re-Register-button"}], title: "&nbsp;", width: "420px"}],

As you can see I have associated 4 buttons to the column,In the grid Data Bound event, I want to show 2 buttons for some rows and 3 buttons for some rows and 4 buttons for some.

Please let me know how can i achieve this in Data Bound event.

Thanks
Anil.
0
Alexander Valchev
Telerik team
answered on 02 Jul 2012, 07:08 AM
Hi Anil,

I have already replied to your questions in the other forum thread on the same subject. To avoid any duplications I would like to ask you to continue the conversation there.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Phil
Top achievements
Rank 2
answered on 11 Aug 2012, 01:36 PM
Hi:

I came to a different solution using templates
http://www.kendoui.com//forums/ui/grid/image-only-on-command-buttons.aspx

Phil
Tags
Grid
Asked by
Motahera
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
ANIL
Top achievements
Rank 1
Phil
Top achievements
Rank 2
Share this question
or