MVC Grid Image Button

6 posts, 0 answers
  1. Lister Potter
    Lister Potter avatar
    4 posts
    Member since:
    Oct 2009

    Posted 06 Sep 2012 Link to this post

    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!
  2. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 06 Sep 2012 Link to this post

    Please take a look into this post or in this other post where I explain how to do it.
  3. Kendo UI is VS 2017 Ready
  4. Lister Potter
    Lister Potter avatar
    4 posts
    Member since:
    Oct 2009

    Posted 07 Sep 2012 Link to this post

    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" }));
      }
     )

  5. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 07 Sep 2012 Link to this post

    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)
  6. Vladimir
    Vladimir avatar
    15 posts
    Member since:
    Jan 2011

    Posted 29 Mar 2013 Link to this post

    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
            }



Back to Top
Kendo UI is VS 2017 Ready