How to add a checkbox into a jQgrid header

jqgrid

Each jQgrid row has multiple checkboxes, so I cannot use (just) the multiselect.

This is how the column is setup…

{ name: 'ColName', label: '', width: 50,
editable: true, sortable: false, edittype: "checkbox", formatter:
'checkbox', formatoptions: { disabled:false}, index:"my_checkbox",
editoptions: {value:"Yes":"No"} }

When I click the checkbox in the header, the header is redrawn without the check. I can capture the event, but cannot display the check to the user.

So my question would be, how can I get a checkbox to operate normally inside a header label OR how can I implement multiple multiselects.

Best Answer

I was able to fix my problem by preventing the jQgrid events from firing after the checkbox event.

I changed my checkbox to...

<input type="checkbox" onclick="checkBox(event)" />

and added the following method...

function checkBox(e) {
  e = e||event;/* get IE event ( not passed ) */
  e.stopPropagation? e.stopPropagation() : e.cancelBubble = true;
}

Related Solutions

Jquery – JqGrid Select Box in a cell

Probably it is misunderstanding. You will see select box in cell only if the cell will be editing mode. For example you can include cell editing support in your local jqGrid if you include two additional parameters in the grid definition

cellEdit: true,
cellsubmit: 'clientArray'

You can also use inline editing instead.

I am not sure how your data in mydata array look like. It can be needed, that you have to add formatter:'select' additionally to the definition of the 'ship' column.

JQgrid checkbox onclick update database

You can set a click event handler inside of loadComplete:

loadComplete: function () {
    var iCol = getColumnIndexByName ($(this), 'Aktiv'), rows = this.rows, i,
        c = rows.length;

    for (i = 1; i < c; i += 1) {
        $(rows[i].cells[iCol]).click(function (e) {
            var id = $(e.target).closest('tr')[0].id,
                isChecked = $(e.target).is(':checked');
            alert('clicked on the checkbox in the row with id=' + id +
                '\nNow the checkbox is ' +
                (isChecked? 'checked': 'not checked'));
        });
    }
}

where

var getColumnIndexByName = function(grid, columnName) {
    var cm = grid.jqGrid('getGridParam', 'colModel'), i, l;
    for (i = 1, l = cm.length; i < l; i += 1) {
        if (cm[i].name === columnName) {
            return i; // return the index
        }
    }
    return -1;
};

Instead of the alert you should use jQuery.ajax to send information to the server about updating the checkbox state.

You can see a demo here.

Best Answer

Related Solutions

Jquery – JqGrid Select Box in a cell

JQgrid checkbox onclick update database

Related Topic