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

Custom icon only buttons for edit and delete

3 Answers 1226 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Terrell
Top achievements
Rank 1
Terrell asked on 22 Apr 2019, 06:44 PM
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.

3 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 23 Apr 2019, 08:03 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Terrell
Top achievements
Rank 1
answered on 24 Apr 2019, 10:30 PM
Thanks but the solution did not work. It only shows the pencil
0
Tsvetomir
Telerik team
answered on 29 Apr 2019, 08:30 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Terrell
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Terrell
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or