
Lister Potter
Top achievements
Rank 1
Lister Potter
asked on 06 Sep 2012, 09:27 PM
I have custom buttons inside my Kendo Grid, but would like the buttons to show an image and not text, how can I do this? I have searched the forum but can't find a solution.
Thanks!
Thanks!
5 Answers, 1 is accepted
0
0

Lister Potter
Top achievements
Rank 1
answered on 07 Sep 2012, 08:16 PM
That works for the tool bar buttons, but I can't get it to work for row level buttons, my code is below:
@(Html.Kendo().Grid(Model)
.Name("grid")
.ToolBar(toolbar =>
{
toolbar.Custom()
.Name("btnFoo")
.Url("~/Foo/Bar")
.HtmlAttributes(new { @class = "k-icon k-add" });
}
)
.Columns(columns =>
{
columns.Bound(p => p.Foo);
columns.Bound(p => p.Bar);
columns.Command(command => command.Custom("Foo").Click("foo").Text(" ").HtmlAttributes(new { @class = "k-icon k-edit" }));
columns.Command(command => command.Custom("Bar").Click("bar").Text(" ").HtmlAttributes(new { @class = "k-icon k-delete" }));
}
)
0

OnaBai
Top achievements
Rank 2
answered on 07 Sep 2012, 09:17 PM
I used the same approach and it works... When you say that you "can't get it to work" is that the buttons are not rendered, that they are rendered but not as you want, that they are rendered correctly but don't do what you want,...?
When you define the columns you have something like:
So, you should change it to:
Leaving the text empty will remove the text of the button.
If you don't mind having the button with at least 64px you are done. Otherwise you should play with the CSS definitions for forcing the buttons to do not have a min-width. For example, something like:
NOTE: The important is really important :-D
One difference that I see is that you use @class while I use imageClass (not sure if one translates into the other)
When you define the columns you have something like:
{ title:
"Action"
, command: [
"destroy"
,
"edit"
] }
{
title:
"Action"
,
command:[
{
name:
"destroy"
,
text:
""
,
imageClass:
"k-icon k-delete"
},
{
name:
"edit"
,
text:
""
,
imageClass:
"k-icon k-i-pencil"
}
]
},
If you don't mind having the button with at least 64px you are done. Otherwise you should play with the CSS definitions for forcing the buttons to do not have a min-width. For example, something like:
.k-button {
min-width
:
0
!important
;
padding-right
:
0
;
}
One difference that I see is that you use @class while I use imageClass (not sure if one translates into the other)
0

Vladimir
Top achievements
Rank 2
answered on 29 Mar 2013, 09:06 AM
I use this technique:
and CSS:
.Columns(columns =>
{
columns.Command(command =>
{
command.Custom(
"PrintForm"
).Click(
"printInvoice"
).Text(
" "
);
command.Destroy();
}).Width(200);
})
.k-grid tbody .k-button {
min-width
:
0px
}
.k-grid-PrintForm span {
background-image
:
url
(@Url.Content(
"~/Content/img/glyphicons-halflings.png"
));
width
:
14px
;
height
:
14px
;
line-height
:
14px
;
display
:inline-
block
;
background-position
:
-96px
-48px
}
0

Kris Nobels
Top achievements
Rank 2
answered on 12 Oct 2013, 03:23 PM