Custom Command Buttons - Images vs. Text

[Matt]

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.

[Venelin]

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