Make column a flag

Question

I am loading a grid with a database query (in PHP using the CodeIgniter abd jqgrid helper). I have no problem to display a nice grid with my data.

I want to display a new colomn with checkboxes to select one or more rows.

Unable to add new column after loading. Therefore, I try to do this: - Colomn is added when creating the grid, - When creating, I add the parameter "loadComplete" with the function, - When diplaying, the function is executed. There he 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 is "Dest".

My problem: nothing is added ...

Thank you for your help!

XB

EDIT: I found the following solution:

• A column of flags has been added to the colModel statement,
• To initialize the value and activate the checkboxes ( they are disabled during creation! ), I use the "loadComplete" callback function.

The code is very simple, but it's hard for me to find ...

Mesh 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}}, ....] 

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 is not optimized, but it works!

Answer 1

It is not possible to add a new column after loading, but you can make the hidden column visible. You just need to define a column with a checkbox (you can use formatoptions: { disabled: false} if necessary), and you can use showCol inside the showCol callback to make the column visible if necessary, or make it hidden using the method hideCol .

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

• the demo creates a column with flags based on the input (based on the logical value that exists for each row). The full input will be automatically saved by jqGrid according to the internal parameters data and _index . The first page of data is displayed.
• the demo uses beforeSelectRow to handle click / check / beforeSelectRow boxes. Since datatype: "local" used in jqGrid, I used getLocalRow to access the internal object that represented the row data. When checking / unchecking the boxes, I changed the corresponding data field. As a result, you can change the state of some flags, change the page, and return to the first page. You will see that the changed state of the flags has been saved.

The following is 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 }, ... });