Rectangle 27 0

jquery ui jqGrid:Font Awesome Icons?


$("#grid").jqGrid("initFontAwesome").jqGrid({
    ... // jqGrid options and callbacks
});
$("#grid").jqGrid({
    ... // jqGrid options and callbacks
});
.jqGrid("initFontAwesome")
.ui-jqgrid .ui-jqgrid-hdiv { padding-top: 2px; overflow-y: hidden; }
.ui-jqgrid .ui-pg-table .ui-pg-input, .ui-jqgrid .ui-pg-table .ui-pg-selbox {
    height: auto;
    width: auto;
    line-height: inherit;
}
.ui-jqgrid .ui-pg-table .ui-pg-selbox {
    padding: 1px;
}
.ui-jqgrid { line-height: normal; }
div.ui-jqgrid-view table.ui-jqgrid-btable {
    border-style: none;
    border-top-style: none;
    border-collapse: separate;
}
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title {
    border-collapse: separate;
    margin-top: 0;
    top: 0;
    margin-right: 2px;
    height: 22px;
    width: 20px;
    padding: 2px;
}
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title.ui-state-hover span {
    margin-top: -1px;
    margin-left: -1px;
}
.ui-paging-info { display: inline; }
.ui-jqgrid .ui-pg-table { border-collapse: separate; }
div.ui-jqgrid-view table.ui-jqgrid-btable td {
    border-left-style: none
}
div.ui-jqgrid-view table.ui-jqgrid-htable {
    border-style: none;
    border-top-style: none;
    border-collapse: separate;
}
div.ui-jqgrid-view table.ui-jqgrid-btable th {
    border-left-style: none
}
.ui-jqgrid .ui-jqgrid-htable th div {
    height: 14px;
}
.ui-jqgrid .ui-jqgrid-resize {
    height: 18px !important;
}
/*global $ */
(function ($) {
    "use strict";
    /*jslint unparam: true */
    $.extend($.jgrid, {
        icons: {
            common: "fa", // will be implemented later
            scale: "", // will be implemented later. For example as "fa-lg"
            titleVisibleGrid: "fa fa-arrow-circle-up",
            titleHiddenGrid: "fa fa-arrow-circle-down",
            titleIcon: "ui-corner-all fa-title",
            close: "fa fa-times",
            edit: "fa fa-pencil fa-fw",
            add: "fa fa-plus fa-fw",
            del: "fa fa-trash-o fa-fw",
            search: "fa fa-search fa-fw",
            refresh: "fa fa-refresh fa-fw",
            view: "fa fa-file-o fa-fw",
            pager: {
                first: "fa fa-step-backward fa-fw",
                prev: "fa fa-backward fa-fw",
                next: "fa fa-forward fa-fw",
                last: "fa fa-step-forward fa-fw"
            },
            form: {
                prev: "fa fa-caret-left",
                next: "fa fa-caret-right",
                save: "fa fa-floppy-o",
                undo: "fa fa-undo",
                close: "fa fa-times",
                delete: "fa fa-trash-o"
            },
            searchForm: {
                reset: "fa fa-undo",
                query: "fa fa-comments-o",
                search: "fa fa-search"
            }
        }
    });

    $.extend($.jgrid.nav, {
        editicon: $.jgrid.icons.edit,
        addicon: $.jgrid.icons.add,
        delicon: $.jgrid.icons.del,
        searchicon: $.jgrid.icons.search,
        refreshicon: $.jgrid.icons.refresh,
        viewicon: $.jgrid.icons.view
    });

    $.extend($.jgrid.defaults, {
        fontAwesomeIcons: true // the new option will be used in callbacks
    });

    $.extend($.jgrid, {
        originalCreateModal: $.jgrid.originalCreateModal || $.jgrid.createModal,
        createModal: function (aIDs, content, p, insertSelector, posSelector, appendsel, css) {
            $.jgrid.originalCreateModal.call(this, aIDs, content, p, insertSelector, posSelector, appendsel, css);
            if ($(insertSelector).find(">.ui-jqgrid-bdiv>div>.ui-jqgrid-btable").jqGrid("getGridParam", "fontAwesomeIcons")) {
                $("#" + $.jgrid.jqID(aIDs.modalhead) + ">a.ui-jqdialog-titlebar-close>span.ui-icon")
                    .removeClass("ui-icon ui-icon-closethick")
                    .addClass($.jgrid.icons.close);
                $("#" + $.jgrid.jqID(aIDs.themodal) + ">div.jqResize").removeClass("ui-icon-grip-diagonal-se");
            }
        }
    });

    $.extend($.jgrid.view, {
        beforeShowForm: function ($form) {
            var $dialog = $form.closest(".ui-jqdialog"),
                $iconSpans = $dialog.find("a.fm-button>span.ui-icon");
            $iconSpans.each(function () {
                var $this = $(this), $fmButton = $this.parent();
                if ($this.hasClass("ui-icon-triangle-1-w")) {
                    $this.removeClass("ui-icon ui-icon-triangle-1-w")
                        .addClass($.jgrid.icons.form.prev);
                } else if ($this.hasClass("ui-icon-triangle-1-e")) {
                    $this.removeClass("ui-icon ui-icon-triangle-1-e")
                        .addClass($.jgrid.icons.form.next);
                } else if ($this.hasClass("ui-icon-close")) {
                    $fmButton.removeClass("fm-button-icon-left")
                        .addClass("fm-button-icon-right")
                        .html("<span class=\"" + $.jgrid.icons.form.close + "\"></span><span>" + $fmButton.text() + "</span>");
                }

            });
        }
    });

    $.extend($.jgrid.del, {
        afterShowForm: function ($form) {
            var $dialog = $form.closest(".ui-jqdialog"),
                $tdButtons = $dialog.find(".EditTable .DelButton"),
                $fmButtonNew = $("<td class=\"DelButton EditButton\" style=\"float: right;\">"),
                $iconSpans = $tdButtons.find(">a.fm-button>span.ui-icon");

            $tdButtons.css("float", "right");
            $iconSpans.each(function () {
                var $this = $(this), $fmButton = $this.parent();
                if ($this.hasClass("ui-icon-scissors")) {
                    $fmButton.html("<span class=\"" + $.jgrid.icons.form.delete + "\"></span><span>" + $fmButton.text() + "</span>");
                    $fmButtonNew.append($fmButton);
                } else if ($this.hasClass("ui-icon-cancel")) {
                    $fmButton.html("<span class=\"" + $.jgrid.icons.form.undo + "\"></span><span>" + $fmButton.text() + "</span>");
                    $fmButtonNew.append($fmButton);
                }
            });
            if ($fmButtonNew.children().length > 0) {
                // remove &nbsp; between buttons
                $tdButtons.replaceWith($fmButtonNew);
            }
        }
    });

    $.jgrid.extend({
        initFontAwesome: function () {
            return this.each(function () {
                var $grid = $(this);
                $grid.bind("jqGridFilterAfterShow", function (e, $form) {
                    // an alternative to afterShowSearch
                    var $dialog = $form.closest(".ui-jqdialog"),
                        $iconSpans = $dialog.find("a.fm-button>span.ui-icon");
                    $iconSpans.each(function () {
                        var $this = $(this), $fmButton = $this.parent();
                        $this.removeClass("ui-icon");
                        if ($this.hasClass("ui-icon-search")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.addClass("fm-button-icon-right")
                                .html("<span class=\"" + $.jgrid.icons.searchForm.search + "\"></span><span>" + $fmButton.text() + "</span>");
                        } else if ($this.hasClass("ui-icon-arrowreturnthick-1-w")) {
                            $this.closest(".EditButton").css("float", "left");
                            $fmButton.addClass("fm-button-icon-left")
                                .html("<span class=\"" + $.jgrid.icons.searchForm.reset + "\"></span><span>" + $fmButton.text() + "</span>");
                        } else if ($this.hasClass("ui-icon-comment")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.addClass("fm-button-icon-right")
                                .html("<span class=\"" + $.jgrid.icons.searchForm.query + "\"></span><span>" + $fmButton.text() + "</span>");
                        }
                    });
                }).bind("jqGridAddEditBeforeShowForm", function (e, $form) {
                    // alternative to beforeShowForm callback
                    var $dialog = $form.closest(".ui-jqdialog"),
                        $iconSpans = $dialog.find("a.fm-button>span.ui-icon");
                    $iconSpans.each(function () {
                        var $this = $(this), $fmButton = $this.parent();
                        if ($this.hasClass("ui-icon-triangle-1-w")) {
                            $this.removeClass("ui-icon ui-icon-triangle-1-w")
                                .addClass($.jgrid.icons.form.prev);
                        } else if ($this.hasClass("ui-icon-triangle-1-e")) {
                            $this.removeClass("ui-icon ui-icon-triangle-1-e")
                                .addClass($.jgrid.icons.form.next);
                        } else if ($this.hasClass("ui-icon-disk")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.html("<span class=\"" + $.jgrid.icons.form.save + "\"></span><span>" + $fmButton.text() + "</span>");
                        } else if ($this.hasClass("ui-icon-close")) {
                            $this.closest(".EditButton").css("float", "right");
                            $fmButton.removeClass("fm-button-icon-left")
                                .addClass("fm-button-icon-right")
                                .html("<span class=\"" + $.jgrid.icons.form.undo + "\"></span><span>" + $fmButton.text() + "</span>");
                        }

                    });
                }).bind("jqGridHeaderClick", function (e, gridstate) {
                    var $icon;
                    if (this.p.fontAwesomeIcons) {
                        $icon = $(this).closest(".ui-jqgrid").find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>span");
                        if (gridstate === "visible") {
                            $icon.removeClass("ui-icon ui-icon-circle-triangle-n fa-arrow-circle-down")
                                .addClass($.jgrid.icons.titleVisibleGrid).parent().addClass($.jgrid.icons.titleIcon);
                        } else if (gridstate === "hidden") {
                            $icon.removeClass("ui-icon ui-icon-circle-triangle-n fa-arrow-circle-up")
                                .addClass($.jgrid.icons.titleHiddenGrid).parent().addClass($.jgrid.icons.titleIcon);
                        }
                    }
                }).bind("jqGridInitGrid", function () {
                    var $this = $(this), $pager, $sortables;

                    if (this.p.fontAwesomeIcons) {
                        $pager = $this.closest(".ui-jqgrid").find(".ui-pg-table");
                        $pager.find(".ui-pg-button>span.ui-icon-seek-first")
                            .removeClass("ui-icon ui-icon-seek-first")
                            .addClass($.jgrid.icons.pager.first);
                        $pager.find(".ui-pg-button>span.ui-icon-seek-prev")
                            .removeClass("ui-icon ui-icon-seek-prev")
                            .addClass($.jgrid.icons.pager.prev);
                        $pager.find(".ui-pg-button>span.ui-icon-seek-next")
                            .removeClass("ui-icon ui-icon-seek-next")
                            .addClass($.jgrid.icons.pager.next);
                        $pager.find(".ui-pg-button>span.ui-icon-seek-end")
                            .removeClass("ui-icon ui-icon-seek-end")
                            .addClass($.jgrid.icons.pager.last);

                        $this.closest(".ui-jqgrid")
                            .find(".ui-jqgrid-titlebar>.ui-jqgrid-titlebar-close>.ui-icon-circle-triangle-n")
                            .removeClass("ui-icon ui-icon-circle-triangle-n")
                            .addClass("fa fa-arrow-circle-up").parent().addClass("ui-corner-all fa-title");

                        $sortables = $this.closest(".ui-jqgrid")
                                .find(".ui-jqgrid-htable .ui-jqgrid-labels .ui-jqgrid-sortable span.s-ico");
                        $sortables.find(">span.ui-icon-triangle-1-s")
                            .removeClass("ui-icon ui-icon-triangle-1-s")
                            .addClass("fa fa-sort-asc fa-lg");
                        $sortables.find(">span.ui-icon-triangle-1-n")
                            .removeClass("ui-icon ui-icon-triangle-1-n")
                            .addClass("fa fa-sort-desc fa-lg");
                    }
                });
            });
        }
    });
}(jQuery));
/*global jQuery */
(function ($) {
    "use strict";
    /*jslint unparam: true */
    $.extend($.fn.fmatter, {
        checkboxFontAwesome4: function (cellValue, options) {
            var title = options.colModel.title !== false ? ' title="' + (options.colName || options.colModel.label || options.colModel.name) + '"' : '';
            return (cellValue === 1 || String(cellValue) === "1" || cellValue === true || String(cellValue).toLowerCase() === "true") ?
                '<i class="fa fa-check-square-o fa-lg"' + title + '></i>' :
                '<i class="fa fa-square-o fa-lg"' + title + '></i>';
        }
    });
    $.extend($.fn.fmatter.checkboxFontAwesome4, {
        unformat: function (cellValue, options, elem) {
            var cbv = (options.colModel.editoptions) ? options.colModel.editoptions.value.split(":") : ["Yes", "No"];
            return $(">i", elem).hasClass("fa-check-square-o") ? cbv[0] : cbv[1];
        }
    });
}(jQuery));
<link rel="stylesheet" type="text/css"
      href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
...
<link rel="stylesheet" type="text/css" href=".../ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href=".../jQuery.jqGrid.fontAwesome4.css" />
...
<script type="text/javascript" src=".../i18n/grid.locale-en.js"></script>
<script type="text/javascript" src=".../jquery.jqGrid.min.js"></script>
<script type="text/javascript" src=".../jQuery.jqGrid.fontAwesome4.js"></script>
<script type="text/javascript"
        src=".../jQuery.jqGrid.checkboxFontAwesome4.js"></script>
beforeInitData: function () { $("#editmod" + this.id).remove(); }
formatter: "checkbox"
formatter: "checkboxFontAwesome4"
height
initFontAwesome
jQuery.jqGrid.bootstrap-fixes.css
jQuery.jqGrid.checkboxFontAwesome4.js
jQuery.jqGrid.fontAwesome4.css
jQuery.jqGrid.fontAwesome4.js
jquery.jqGrid.min.js
jquery.jqGrid.src.js
  • The tests which I made with grids having many rows and columns using the tree checkbox formatters shows that formatter "checkboxFontAwesome4" is the most quick in rendering (in all web browsers where I it tested), formatter: "checkbox" is lower and "clickableCheckbox" is the mostly slow. So formatter "checkboxFontAwesome4" is not only cool, but it's really quick in rendering.
  • one can select the row by clicking on the icons. The standard formatter: "checkbox" uses disabled <input type="checkbox">. Clicking on disabled control will be blocked on the most web browsers. I posted before "clickableCheckbox" (see here and here).

@klm10: You are welcome! I like Font Awesome. After writing the old answer I try to push some peoples to use it. For example I poesetd to jQuery UI (see here and here). I hope that jqGrid and jQuery will use this fonts or some other vector fonts in the near future. I hop that my answer will help many other peoples too.

Hi Oleg, I was able to follow your instructions now my grid is using the font awesome icons! Thank you so much for your post. This was a very important part of the grid for my project. My question now is when I click on my icons such as Add the modal form is displayed in a very large font but I can't seem to find where it is formatted to be so large. Do you know how to format the add/edit form and warning message box's font-size? Thank you again for all your help!

I agree that my old answer can't be used with Font Awesome 4 because the names of the classes are changed in version 4. I use Font Awesome 4 myself in solutions which I develop for my customers and I decide to share it with other.

If someone is looking to work around this and fix some browser issues like scrollbars in chrome or testing on mobile etc you can use this fiddle jsfiddle.net/farrukhsubhani/FcFND its just copy with all files linked. I hope @Oleg would not mind linking css and js from his server.

Nevermind, I was able to find it in the css file under jqdialog font-size. Thanks again for the font-awesome icon workout!

The usage of suggested method initFontAwesome is very simple. First of all one need to include additional CSS and JavaScript files:

UPDATED: Another demo contains some additional CSS styles which improve visibility of jqGrid if one includes bootstrap.css of the Bootstrap 3.0.2. I am sure that the styles are not the best, but there fix the problems which I found in my tests. Below are the styles:

Note