jqGrid free and ace admin template integration

Question

I'm trying to play around with various admin templates and ran on to an old Bootstrap 3 one which has jqGrid support. While the demo is working great but it uses the commercial version and not the free jqGrid.

In the link to the repository of source of the demo here (Ace Admin Template), the main file is call jqgrid.html, if I use the most recent free jqGrid as shown below, then the attributes of the button images are no longer working. See the attached pictures.

Tests with commercial jqGrid:

Tests with free jqGrid

I replace the below lines

<script src="assets/js/jquery.jqGrid.min.js"></script>

by these one

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.min.css ">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.min.js"></script>    

So my question is what is the new code I should replace to fix this, since the below code is called in beforeShowForm?

//update buttons classes
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')  

With the premium version (Guriddo jqGrid JS - v5.0.2 - 2016-01-18), it works like a charm, see working premium images and free jqGrid images, but when I switched to free jqGrid, the buttons text are not working making hard to read action texts.

This great admin template is a nice add-on to free jQgrid to complete my side project. Not sure where to buy it since it is no longer available for purchase Ace Admin Template Info.

Updated

I still have one small display issue on the header, below is the screen shot

I used one of your demo code so you can reproduce it.

        <script type="text/javascript">

        jQuery(function($) {
            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";


            var parent_column = $(grid_selector).closest('[class*="col-"]');
            //resize to fit page size
            $(window).on('resize.jqGrid', function () {
                $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
            })

            //resize on sidebar collapse/expand
            $(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
                if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
                    //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                    setTimeout(function() {
                        $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
                    }, 20);
                }
            })

            //if your grid is inside another element, for example a tab pane, you should use its parent's width:
            /**
            $(window).on('resize.jqGrid', function () {
                var parent_width = $(grid_selector).closest('.tab-pane').width();
                $(grid_selector).jqGrid( 'setGridWidth', parent_width );
            })
            //and also set width when tab pane becomes visible
            $('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
              if($(e.target).attr('href') == '#mygrid') {
                var parent_width = $(grid_selector).closest('.tab-pane').width();
                $(grid_selector).jqGrid( 'setGridWidth', parent_width );
              }
            })
            */


    $.jgrid.icons.aceFontAwesome = $.extend(true, {},
        $.jgrid.icons.fontAwesome,
        {
            nav: {
                add: "fa-plus-circle",
                view: "fa-search-plus",
            },
            actions: {
                save: "fa-check",
                cancel: "fa-times"
            },
            pager: {
                first: "fa-angle-double-left",
                prev: "fa-angle-left",
                next: "fa-angle-right",
                last: "fa-angle-double-right"
            },
            form: {
                prev: "fa-angle-left",
                next: "fa-angle-right",
                save: "fa-check",
                cancel: "fa-times"
            }
        }
    );          

$.jgrid.icons.aceFontAwesome = $.extend(true, {},
        $.jgrid.icons.fontAwesome,
        {
            nav: {
                add: "fa-plus-circle",
                view: "fa-search-plus",
            },
            actions: {
                save: "fa-check",
                cancel: "fa-times"
            },
            pager: {
                first: "fa-angle-double-left",
                prev: "fa-angle-left",
                next: "fa-angle-right",
                last: "fa-angle-double-right"
            },
            form: {
                prev: "fa-angle-left",
                next: "fa-angle-right",
                save: "fa-check",
                cancel: "fa-times"
            }
        }
    );              
var data = [
        {code:"A", name:"Project A",
            jan2017:1, feb2017:0, mar2017:0, apr2017:0,
            may2017:0, jun2017:0, jul2017:0, aug2017:0,
            sep2017:0, oct2017:0, nov2017:0, dec2017:1},
        {code:"A", name:"Project A",
            jan2017:1, feb2017:1, mar2017:0, apr2017:0,
            may2017:1, jun2017:0, jul2017:0, aug2017:0,
            sep2017:0, oct2017:1, nov2017:0, dec2017:0}
    ],
    intTemplate = {
        width: 20, template: "integer",
        align: "center", editable: true
    };
            jQuery(grid_selector).jqGrid({
    colModel: [
        { name: "code", label: "Code", width: 50, align: "center" },
        { name: "name", label: "Name", width: 70 },
        { name: "jan2017", label: "Jan", template: intTemplate },
        { name: "feb2017", label: "Feb", template: intTemplate },
        { name: "mar2017", label: "Mar", template: intTemplate },
        { name: "apr2017", label: "Apr", template: intTemplate },
        { name: "may2017", label: "May", template: intTemplate },
        { name: "jun2017", label: "Jun", template: intTemplate },
        { name: "jul2017", label: "Jul", template: intTemplate },
        { name: "aug2017", label: "Aug", template: intTemplate },
        { name: "sep2017", label: "Sep", template: intTemplate },
        { name: "oct2017", label: "Oct", template: intTemplate },
        { name: "nov2017", label: "Nov", template: intTemplate },
        { name: "dec2017", label: "Dec", template: intTemplate },
        { name: "jan2018", label: "Jan", template: intTemplate },
        { name: "feb2018", label: "Feb", template: intTemplate },
        { name: "mar2018", label: "Mar", template: intTemplate },
        { name: "apr2018", label: "Apr", template: intTemplate },
        { name: "may2018", label: "May", template: intTemplate },
        { name: "jun2018", label: "Jun", template: intTemplate },
        { name: "jul2018", label: "Jul", template: intTemplate },
        { name: "aug2018", label: "Aug", template: intTemplate },
        { name: "sep2018", label: "Sep", template: intTemplate },
        { name: "oct2018", label: "Oct", template: intTemplate },
        { name: "nov2018", label: "Nov", template: intTemplate },
        { name: "dec2018", label: "Dec", template: intTemplate }
    ],
    cmTemplate: { autoResizable: true },
    autoResizing: { compact: true },
    viewrecords: true,
    data: data,
    iconSet: "fontAwesome",
    rownumbers: true,
    sortname: "invdate",
    sortorder: "desc",
    pager: true,
    iconSet: "aceFontAwesome", //"fontAwesome",             
    grouping: true,
    rowNum: 10,
    rowList: [5, 10, 20, "10000:All"],
    groupingView: {
        groupField: ["name"],
        groupText: ["<b>{0}</b>"]
    },
        loadComplete : function() {
            var table = this;
            var parent_column = $(grid_selector).closest('[class*="col-"]');
            setTimeout(function(){

                $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
            }, 0);
        },          
                        sortname : 'invid',
    inlineEditing: {
        keys: true
    },
    navOptions: {
        add: false,
        edit: false,
        del: false,
        search: false
    },
    inlineNavOptions: {
        add: true,
        edit: true
    },
    caption: "Test"
}).jqGrid("navGrid")
.jqGrid("inlineNav")
.jqGrid("rotateColumnHeaders",
    ["jan2017", "feb2017", "mar2017", "apr2017", "may2017", "jun2017",
     "jul2017", "aug2017", "sep2017", "oct2017", "nov2017", "dec2017",
     "jan2018", "feb2018", "mar2018", "apr2018", "may2018", "jun2018",
     "jul2018", "aug2018", "sep2018", "oct2018", "nov2018", "dec2018"])
.jqGrid('setGroupHeaders', {
        useColSpanStyle: true,
        groupHeaders: [
            { startColumnName: 'code', numberOfColumns: 2, titleText: '<i>Project</i>' },
            { startColumnName: 'jan2017', numberOfColumns: 12, titleText: '2017' },
            { startColumnName: 'jan2018', numberOfColumns: 12, titleText: '2018' }
        ]
});

});

I replaced the above code in jqgrid.html. I don't know what really causes it. Could it be rotateColumnHeaders which breaks it?

Pic shows moving code after setgroupheader. The vertical lines are still cut.

More updates

After investigation and trial by error, I found out the issue but it masks an another one, I no longer have header issues but the buttons do not display nicely. Is there anyway to overwrite the css to make them look like the one without using the line : guistyle:bootstrap, seems like jqueryUI is conflicting some how with ace css.

Fix header, by adding : guiStyle: "bootstrap", action buttons do not look good. Blue color header is also gone along with button colors

Removing guiStyle: "bootstrap" breaks header, blue color header, action button look nicely

I've tried to reproduce with jsfiddle but no luck yet.

Answer 1

I looked through the Ace Admin template. One can see that it's created fror old jqGrid, which don't supports Font Awesome and Bootstrap. Free jqGrid supports both (see here and here). One more wiki article describes how one can use other Font Awesome icons to create his own iconSet. For example, one can define

$.jgrid.icons.aceFontAwesome = $.extend(true, {},
    $.jgrid.icons.fontAwesome,
    {
        nav: {
            add: "fa-plus-circle",
            view: "fa-search-plus",
        },
        actions: {
            save: "fa-check",
            cancel: "fa-times"
        },
        pager: {
            first: "fa-angle-double-left",
            prev: "fa-angle-left",
            next: "fa-angle-right",
            last: "fa-angle-double-right"
        },
        form: {
            prev: "fa-angle-left",
            next: "fa-angle-right",
            save: "fa-check",
            cancel: "fa-times"
        }
    }
);

to use some other icons as defaults (see here). After that one can use iconSet: "aceFontAwesome" option instead of iconSet: "fontAwesome" used typically.

All other CSS settings of Ace Admin template are just customization of the standard CSS. I personally find Ace Admin CSS very nice, but one needs to invest some time to make free jqGrid looks exactly like Ace Admin. One needs no jqGrid knowledge for that. It's enough to use Developer Tools of Chrome to examine CSS used on http://ace.jeka.by/jqgrid.html and to implement the same (or close) settings on free jqGrid. I created the demo http://jsfiddle.net/OlegKi/jj0qbhbt/ which shows how one can do that. One needs just expend CSS settings, which I included in the demo.