Custom Buttons without Text

5 posts, 0 answers
  1. Stephan
    Stephan avatar
    5 posts
    Member since:
    Feb 2013

    Posted 06 Mar 2013 Link to this post

    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);
    -->
  2.
  3. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 07 Mar 2013 Link to this post

    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!
  5. Robert
    Robert avatar
    2 posts
    Member since:
    Sep 2014

    Posted 26 Oct 2016 Link to this post

    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.
  7. Robert
    Robert avatar
    2 posts
    Member since:
    Sep 2014

    Posted 26 Oct 2016 Link to this post

    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

  8.
  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 26 Oct 2016 Link to this post

    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.
Back to Top