Make a column be a checkbox

It’s not impossible to add a new column after loading, but it’s possible to make a hidden column visible. You need just define the column having checkbox (you can use formatoptions: { disabled: false} if it’s required) and you can use showCol inside of loadComplete callback to make the column visible if required or force it be hidden using hideCol method.

UPDATED: If I correctly understand what you want (after the discussion in the comments) then the demo should demonstrate the solution:

  • the demo creates column with checkboxes based on the input data (based on boolean value existing for every row). The full input data will be saved by jqGrid automatically in internal parameters data and _index. The first page with the data will be displayed.
  • the demo uses beforeSelectRow to handle click/checking/unchecking of the checkboxs. Because datatype: "local" are used in jqGrid I used getLocalRow to access to internal object which reprecented the data of the row. On checking/unchecking of the checkboxs I modified the corresponding field of the data. As the result one can change the state of some checkboxes, change the page and come back to the first page. One will see that the modified state of checkboxs were saved.

Below are the most important part of the code:

var mydata = [
        ...
        { id: "4", ..., closed: true, ... },
        ....
    ];

$("#list").jqGrid({
    datatype: "local",
    data: mydata,
    colModel: [
        ...
        {name: "closed", width: 70, align: "center",
            formatter: "checkbox", formatoptions: { disabled: false},
            edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
            stype: "select", searchoptions: { sopt: ["eq", "ne"], 
                value: ":Any;true:Yes;false:No" } },
        ...
    ],
    beforeSelectRow: function (rowid, e) {
        var $self = $(this),
            iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
            cm = $self.jqGrid("getGridParam", "colModel"),
            localData = $self.jqGrid("getLocalRow", rowid);
        if (cm[iCol].name === "closed") {
            localData.closed = $(e.target).is(":checked");
        }

        return true; // allow selection
    },

    ...
});

Leave a Comment