How to show image only button for Destroy command button

[Motahera]

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?

[Alexander Valchev]

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

[ANIL]

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.

[Alexander Valchev]

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

[Phil]

Hi:

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

Phil