Search code examples
javascriptjquerycssjqgridfree-jqgrid

How add action button to free jqgrid toolbar if fontawesome icon set is used

FontAwesome icon set is is used in free jqgrid. Default actions buttons appear as fontawesome buttons. I tried to annd custom font avesome icon button to jqgrid row. This works for jquery ui icons:

        loadComplete: function() {
            var iCol = getColumnIndexByName($(this),'_actions');
            $(this).children("tbody").children("tr.jqgrow")
               .children("td:nth-child("+(iCol+1)+")")
               .each(function() {
                   $("<div>",
                     {
                         mouseover: function() {
                             $(this).addClass('ui-state-hover');
                         },
                         mouseout: function() {
                             $(this).removeClass('ui-state-hover');
                         },
                         click: function(e) {
                             resetSelection();
                             idsOfSelectedRows = [$(e.target).closest("tr.jqgrow").attr("id")];
                             $("#grid").jqGrid('setSelection', $(e.target).closest("tr.jqgrow").attr("id"), false);
                             $('#grid_postbutton').click();
                         }
                     }
                ).css({"margin-left": "2px", float:"left"})
                 .addClass("ui-pg-div ui-inline-post")
                 // .append('<span class="ui-icon fa-lock"></span>')
                 .append('<span class="ui-icon ui-icon-locked"></span>')
                 .prependTo($(this).children("div"));

I replaced ui-icon-locked with fa-lock using

   .append('<span class="ui-icon fa-lock"></span>')

but font awesome icon does not appear. Caret-like jquery-ui icon appears. How to add button with font awesome icon ?

Solution

  • You can do almost the same things to create custom button in free jqGrid 4.8. You need just remove unneeded

    .css({"margin-left": "2px", float:"left"})

    and to replace

    .append('<span class="ui-icon ui-icon-locked"></span>')

    to

    .append('<span class="fa ui-state-default fa-fw fa-lock"></span>')

    You can see the results on the demo:

    enter image description here

    Depend on your exact requirements you can need to use singleSelectClickMode: "selectonly" to prevent deselection of rows of grid on the second click on the same row.

    P.S. I will consider to simplify adding of custom action button in the next version of free jqGrid.