Custom Buttons without Text

[Stephan]

Hello,

we try to add custom Buttons with Icons and no Text. Does anyone know how to solve this Problem?

By now, we use the following Code to show the Buttons:
<!--
columns.Command(commands =>
{
commands.Custom("CustomEdit").Text(“Edit”).Click("edit");
commands.Custom("CustomCopy").Text("Copy")).Click("copy");
commands.Destroy().Text("Delete");
}).HtmlAttributes(new { style = "text-align: center;" }).HeaderTemplate("<div style='text-align: center;'>" + "Options" + "</div>").Width(240);
-->

[Dimiter Madjarov]

Hi Stephan,

To remove the text of the custom commands you should specify a single space in the Text() method.
E.g.

commands.Custom("CustomEdit").Text(" ").Click("edit"); //space

Then you could easily manipulate the buttons through their CSS classes. Each button has an auto generated "k-grid-NAME_OF_COMMAND" class.

If you want to add some of the default Kendo icons to the button, you could do it on dataBound and attach the required classes to the <span> element inside the button.
E.g.

.Events(e => e.DataBound("dataBound"))

function dataBound(e) {
   $(".k-grid-CustomEdit span").addClass("k-icon k-edit");
}

 All the best,
Dimiter Madjarov
the Telerik team

[Robert]

It's an old answer but I would like to point out a problem when using the DataBound-event for this.

If you edit a row (inline), the custom commands are hidden and not redrawn when you cancel the edit (because the DataBound event doesn't fire). The custom button appears again, but without the icon.

[Robert]

Responding to my own post. There is indeed already a solution to this problem posted: 

http://www.telerik.com/forums/how-add-icon-class-to-custom-command#4q30DVNTvEqZtkXuthzEnw

[Dimiter Madjarov]

Hello Robert,

Thanks for the update. I am glad you managed to resolve the issue.

Regards,
Dimiter Madjarov
Telerik by Progress

[Dan]

How can we achieve this functionality on the latest version? Because even though I set the text " "(space) I still get the space text in the button

[Anton Mironov]

Hi Dan,

Attached is a sample project that I prepared for the case. It includes the latest version with this column:

columns.Command(c => c.Custom("CustomEdit").Text(" ").IconClass("k-icon k-i-calendar")); 

The icon is represented out of the box without any text.

Feel free to make the needed tests locally with the sample project attached and let me know if this is the desired result.

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov

[Dan]

Hi Anton,

Yes indeed for the grid it works. But it seems that I have discovered a bug in the treelist. The space for the text is generated regardless if the Text is empty space.

Why do I always find bugs between the grid and the treelist. Do you not take into consideration that any feature that exist in the grid must be also in the treelist and viceversa.

[Anton Mironov]

Hi Dan,

I tried to replicate the described behavior locally.

The result could be found in the following dojo example:

• https://dojo.telerik.com/@anton.mironov/eXaCAyEN

The "lengthOfService" property for the first model is an empty string with a space.

Please run the example above and observe the result. It will be great if you could provide a runnable sample or a dojo example of the pointed issue. Once I have it represented locally, will try my best to fix it for the case.

Looking forward to hearing back from you.

Best Regards,
Anton Mironov