Custom icon only buttons for edit and delete

[Terrell]

I am looking for a straightforward way to replace the update buttons with an icon only edit and delete button. I don't want to use font awesome icons I have a png I want to use (see attached.) and I want no text. The icons are round and fit within my theme.

[Alex Hajigeorgieva]

Hi, Terreli,

To remove the text rom the buttons, you can pass a space in the Text() method:

columns.Command(p =>
{
     p.Edit().Text(" ");
     p.Destroy().Text(" ");

});

Then you can control the images and the button width with some CSS rules, for example:

<style type="text/css">
    /* centres the image */
    .k-grid-edit {
        background-image: url(someurl.someimg.png);
    }

    .k-grid-delete {
        background-image: url(someurl.someimg.png);
    }
    /* changes default width of the button */
    .k-grid tbody .k-button {
        -moz-min-width: 22px;
        -ms-min-width: 22px;
        -o-min-width: 22px;
        -webkit-min-width: 22px;
        min-width: 22px;
        width: 22px;
    }
</style>

Related topics:

https://www.telerik.com/forums/image-only-command-buttons-(once-again)
https://docs.telerik.com/kendo-ui/knowledge-base/grid-icon-only-buttons


Let me know in case you need additional assistance.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Terrell]

Thanks but the solution did not work. It only shows the pencil

[Tsvetomir]

Hi Terrell,

The pencil icon is visible due to the fact that the built-in command buttons have an IconClass assigned. When the table is created, the buttons which have IconClass are created with an additional span HTML element which renders the relevant icon. If you would like to remove the icon, you can do so in the DataBound event handler:

.Events(ev=>ev.DataBound("onDataBound"))

    function onDataBound(e) {
        $(".k-grid-edit, .k-grid-delete").find("span.k-icon").remove();
    }

If you would like to initially not have this icon, you might opt for using a custom button. Decorating it with the "k-grid-edit" class would indicate the grid that this button would execute the built-in edit operation. 

Either way, you might adjust the dimensions of the image as shown below:

<style>
    .k-grid tbody .k-button {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
    }

    .k-grid-edit{
        background-size: 50px 50px;
        background-image: url("/images/200.png");
    }
</style>

Let me know in case additional assistance is required.


Kind regards,
Tsvetomir
Progress Telerik