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 !

Shishko

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

    ...
});

Referendum

Rhank you for your answer ! – Gladygladys

Thank you for your answer ! I think I will take your suggestion, work around your idea. I realized that I forgot the option loadonce:true : it allows to load immediatly all the grid object properties (perhaps I'm wrong...).This options gives me all I need for updating rows or columns. – Gladygladys

@Albiréo: You are welcome! If you would have some implementation problems you could append your current code to the text of your question. If you write small comment to my answer about the changes in the text of your question I could reread it and I'll try to help you. – Referendum

I add column's properties when creating, it's more simple and it works. I'm using the loadComplete callback function to initialize the boolean value to the checkboxes. But, they are not editable dispite the otion editable:true. I am searching for the reason. – Gladygladys

@Albiréo: Sorry, but I don't full understand what you do. If you use formatter: "checkbox" for some column then the values of the checkbox will be automatically set based on the input values ("true", "yes" or "1" follow checking of the boxes). No additional actions in loadComplete are required. If you want that the chechboxes will be not disabled then you need use the property formatoptions: { disabled: false} for the column. To detect changes of the status of the checkbox you can use beforeSelectRow callback. One can use setCell for example to save the new state of the checkbox. – Referendum

@Albiréo: If I correctly understand what you want then the demo should demonstrate the solution. – Referendum

I realized that I didn't understand what to do exactly to have an extra checkboxes column in a grid loaded from a database. With tour help and some searches, I am discovering the solution gradually. Now, I got the column without loadComplete but it's in readonly mode. I am comparing the code you sent me (thank you) and the code I have. – Gladygladys

@Albiréo: The last demo uses datatype: "local", so internal data and _index parameters of jqGrid will be filled with the input data. The formatter allows to display any data (like boolean) in any other form (like checkboxes). So the initialization of checkboxes can be made automatically. Another problem exist if you want that the internal data of jqGrid will be changed on click on cell of the grid. beforeSelectRow halps here. Because the demo uses datatype: "local" then getLocalRow is the best choice. – Referendum

I followed your advice : they gave interesting results that I kept aside for other uses. Thank you. I wrote my solution in the question area. – Gladygladys