prettyCheckable on jqGrid Multiselect

Question

I have a jqGrid table with multi-select checkboxes that I have customized with CSS and prettyCheckable.

To customize all the checkboxes of my table I set .prettyCheckable() as follows:

jQuery(document).ready(function($){
    $("input[type=checkbox]").change(function() {
        $(this).triggerHandler("click");
    }).prettyCheckable();
}); 

but this doesn't work. Only the first checkbox has the style.

So i tried to insert the function .prettyCheckable() into loadComplete of jqGrid, and as suggested by Oleg #here, by adding checked class for <a>.

This is my jqGrid settings:

$(document).ready(function() {
     $('#searchForm').ajaxForm(function() {
        var _data = $('#searchForm').serialize();
        $('#ResultsTable').jqGrid().setGridParam({
            url: '${searchUrl}' + _data,
            loadComplete: function () {
                $(this).find("input.cbox").prettyCheckable();
            }
        }).trigger("reloadGrid")
        return true;
    });
    jsonTable('ResultsTable', 'ResultsPager', '${searchUrl}', 'searchForm',
        {id: 'code'},
        ['Code', 'Description', 'CF'],
        [{name: 'code', index: 'code', width: 55},
        {name: 'description', index: 'description', width: 90},
        {name: 'CF', index: 'CF', width: 80},
        function(id) {
            var selRows = $(this).jqGrid('getGridParam', 'selarrrow');
            $('#edit').toggle(selRows.length == 1);
            $('#delete').toggle(selRows.length > 0);
            $('#editForm #code').val(selRows);
            $('#deleteForm #code').val(selRows);
            //$("#jqg_" + $.jgrid.jqID(this.id + "_" + id)).next("a").toggleClass('checked');
        },
        function(aSel, selected) {
            $('#edit').toggle(false);
            $('#delete').toggle(selected);
            if (selected) {
                $('#editForm #code').val(selRows);
                $('#deleteForm #code').val(selRows);
            }
        },
        true
    )      
});

but also with this does not work, how can I solve this problem?

I have created a small demo here: jsfiddle.net/LStvX/1
Any help is appreciated, Thank you!

Answer 1

First of all I find integration of other plugins in jqGrid interesting. I didn't used prettyCheckable before. After same analyse of the way how prettyCheckable works I created the demo which demonstrate an example of such integration. The results look like on the picture below

To understand the code one should understand that prettyCheckable convert original HTML fragment of the cell with multiselect checkbox

in more complex structure

I find not good that prettyCheckable always create empty <label> element which increase the height of the column. So I added the code which make all the <label> element hidden.

The next problem is that prettyCheckable uses <a> element with optional class "checked" for chechboxes and inform the original checkbox (which are hidden after initialization prettyCheckable) per change event, but jqGrid wait for click event on the row or on the checkbox and have no reaction on change event.

I skip some less interesting technical details now. The most important parts of the code of the demo you find below

$("#list").jqGrid({
    ...
    multiselect: true,
    multiselectWidth: 28,
    onSelectAll: function (aRowids, status) {
        var i, l = aRowids.length, $a,
            selector = "#jqg_" + $.jgrid.jqID(this.id) + "_";

        for (i = 0; i < l; i++) {
            $a = $(selector + $.jgrid.jqID(aRowids[i])).next("a");
            if (status) {
                $a.addClass("checked");
            } else {
                $a.removeClass("checked");
            }
        }
    },
    beforeSelectRow: function (rowid, e) {
        if (e.target.nodeName.toUpperCase() === "A" &&
                $(e.target).prev("input").hasClass("cbox")) {
            $(e.target).prev("input").click();
        }
        return true;
    },
    onSelectRow: function (rowid, state) {
        var $a = $("#jqg_" + $.jgrid.jqID(this.id + "_" + rowid)).next("a");
        if (state) {
            $a.addClass("checked");
        } else {
            $a.removeClass("checked");
        }
    },
    loadComplete: function () {
        var $checkboxes = $(this).find("input.cbox");
        $checkboxes.prettyCheckable();
        $checkboxes.siblings("label").hide();
    }
});
$("#cb_" + $.jgrid.jqID($grid[0].id)).change(function() {
    $(this).triggerHandler("click");
}).prettyCheckable();
$("#cb_" + $.jgrid.jqID($grid[0].id)).siblings("label").hide();

I used additional CSS settings (see the answer) to increase the height of the column headers

th.ui-th-column div {
    white-space: normal !important;
    height: auto !important;
}