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

Custom Buttons without Text

4 Answers 1079 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stephan
Top achievements
Rank 1
Stephan asked on 06 Mar 2013, 03:00 PM
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);
-->

4 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 07 Mar 2013, 02:52 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Robert
Top achievements
Rank 1
answered on 26 Oct 2016, 09:13 AM
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.
0
Robert
Top achievements
Rank 1
answered on 26 Oct 2016, 09:20 AM

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

0
Dimiter Madjarov
Telerik team
answered on 26 Oct 2016, 11:00 AM

Hello Robert,

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

Regards,
Dimiter Madjarov
Telerik by Progress
Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 26 Sep 2022, 05:21 AM

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
Telerik team
commented on 27 Sep 2022, 01:58 PM

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
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 28 Sep 2022, 03:41 AM | edited

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
Telerik team
commented on 29 Sep 2022, 12:26 PM

Hi Dan,

I tried to replicate the described behavior locally.

The result could be found in the following dojo example:

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

 

Tags
Grid
Asked by
Stephan
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Robert
Top achievements
Rank 1
Share this question
or