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
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
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.
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
Hello Robert,
Thanks for the update. I am glad you managed to resolve the issue.
Regards,Dimiter Madjarov
Telerik by Progress
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
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.
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