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

MVC Grid Image Button

5 Answers 962 Views
Grid
This is a migrated thread and some comments may be shown as answers.
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!

5 Answers, 1 is accepted

Sort by
0
OnaBai
Top achievements
Rank 2
answered on 06 Sep 2012, 11:16 PM
Please take a look into this post or in this other post where I explain how to do it.
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:
{ title:"Action", command: [ "destroy", "edit"] }
So, you should change it to:
{
    title:"Action",
    command:[
        {
            name:"destroy",
            text:"",
            imageClass:"k-icon k-delete"
        },
        {
            name:"edit",
            text:"",
            imageClass:"k-icon k-i-pencil"
        }
    ]
},
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:
.k-button {
    min-width: 0 !important;
    padding-right: 0;
}
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)
0
Vladimir
Top achievements
Rank 2
answered on 29 Mar 2013, 09:06 AM
I use this technique:
.Columns(columns =>
{
    columns.Command(command =>
    {
        command.Custom("PrintForm").Click("printInvoice").Text(" ");
        command.Destroy();
    }).Width(200);
})
and CSS:

.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
Tags
Grid
Asked by
Lister Potter
Top achievements
Rank 1
Answers by
OnaBai
Top achievements
Rank 2
Lister Potter
Top achievements
Rank 1
Vladimir
Top achievements
Rank 2
Kris Nobels
Top achievements
Rank 2
Share this question
or