Make a column be a checkbox

Question

I load a grid with a database request (in PHP with CodeIgniter abd jqgrid helper). I haven't any issue to display a nice grid with my datas.

I want to display a new colomn with checkboxes in order to choose one or several rows.

It's impossible to add a new column after loading. So I'm try to do like this : - The colomn is added when creating the grid, - At creating, i add a 'loadComplete' option with a function, - At diplaying, the function is executed. Here it is :

function ajoutCheckBox() {
    var grille = $("#users_grid");

    // Construire les checkbox dans la colonne D
    grille.setColProp('Dest', {editable: true});
    grille.setColProp('Dest', {edittype: 'checkbox'});
    grille.setColProp('Dest', {editoptions: { value: "True:False" }});
    grille.setColProp('Dest', {formatter: "checkbox"});
    grille.setColProp('Dest', {formatoptions: { disabled: true}});



    // Insérer la valeur false dans toutes les lignes de la colonne D
    var index   = grille.jqGrid('getGridParam', '_index');

    for(i in index) {
        grille.jqGrid('setCell', i, 'Dest', 'False', {});
    }
}

As you can see, the gris is called "#users_grid" and the column "Dest".

My issue : nothing appends...

Thank you for your help !

XB

EDIT : I found the following solution :

• Column of checkboxes is added in the colModel statement,
• To initialize the value and to activate the checkboxes (they are disabled on creating !), I use a "loadComplete" callback function.

The code is very simple but hard for me to find...

The grid creation :

loadComplete: function() { ajoutCheckBox() },
colModel:[.... {"name":"Env","index":"Env","width":30,"hidden":false,"align":"left","edittype":"checkbox","formatter":"checkbox","formatoptions":"{ disabled: false}","editable":true,"editoptions":{"editoptions":"{ value: \"True:False\",  defaultValue: \"False\" }}","size":10}}, ....]

The callback function :

function ajoutCheckBox() {
    var grille = $("#users_grid");
    var index = grille.jqGrid('getGridParam', '_index');

    for(i in index) { // Pour toutes les lignes du tableau
        grille.jqGrid('setCell', i, 'Env', 'False');
        $('#'+i).find("input:checkbox").removeAttr('disabled');
    }
}

It doesn't seem to be optimized but it works !

Answer 1

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
    },

    ...
});