Custom Command Buttons - Images vs. Text

2 posts, 0 answers
  1. Matt
    Matt avatar
    78 posts
    Member since:
    Mar 2009

    Posted 17 Mar Link to this post

    I want to create my own action buttons for each row in the grid using gylypicon images.  I've used previous posts in this forum as a guideline for what to do,but the solutions offered (here and here)  appear to be no longer supported.  I can get the custom buttons to appear without any issue, but there's no icon (when a name value is specified), nor does there seem to be a way to just show an icon (we're using Bootstrap gylphicons and want to use them for the action buttons as well).

    Here's how I'm creating the rows in the grid (I have additional command buttons, but they're the same as that below):

    01.columns: [
    02.          { field: "id", title: "Id", hidden: false },
    03.          { field: "parentId", hidden: true },
    04.          { field: "Title", hidden: false },
    05.          { field: "Body", hidden: false },
    06.          { field: "NoteCreator", hidden: true },
    07.          { field: "CreatedBy", title: "Created By", hidden: false },
    08.          { field: "CreatedDate", title: "Created On", hidden: false },
    09.          { field: "Replies", hidden: true },
    10.          { field: "IsRoot", hidden: true },
    11.          { field: "Token", hidden: true },
    12.          {
    13.              field: "Actions", hidden: false,
    14.              command: [{
    15.                  name: " ",
    16.                  click: function (e) {
    17.                      // e.target is the DOM element representing the button
    18.                      var tr = $(e.target).closest("tr");
    19.                      // get the data bound to the current table row
    20.                      var data = this.dataItem(tr);
    21.                      alert("View for id " + data.id + ".");
    22.                  }
    23.              }]
    24.        ],

    The first file (action-buttons-no-icons.png) shows what it looks like; the second file (action-buttons-icons-only.png) shows what I *want* it to look like.

  2. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 21 Mar Link to this post

    Hello Matt,

    Here is how you can achieve the desired functionality:

    1. Add the proper Bootstrap classes in your button definition:

    { command: { name: "ViewDetails", text: "", click: showDetails, className: "btn btn-default" }, title: " ", width: "180px" }

    2. Since Bootstrap requires two sets of classes, one for the button wrapper shown above and one for the span inside, we should add the second too:

    dataBound: function(e) {
       $("#grid .k-grid-ViewDetails > span").addClass('glyphicon glyphicon-eye-open')
    }

    3. Optionally you can add the following style to remove the button's min-width:

    #grid .k-grid-ViewDetails {
      min-width: 0;
    }

    Here is a full example: http://dojo.telerik.com/@vpetrov/UPUCU/3

    Regards,
    Venelin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top