checkbox selection with rendering

[JUNZHONG]

Hi, I upgraded to 3.2 version. We are saving the checkbox selection and when user return to the page, we render the checkbox as per previously selected values.
Previously working code -
{ title: "", maxWidth: 20, minWidth: 20, align: "center", resizable: false,
                       type: 'checkBoxSelection', cls: 'ui-state-default', sortable: false, editable: false,
                          cb: { all: true, header: true },
                        render: function (ui) {
                           var rowData = ui.rowData, dataIndx = ui.dataIndx;
                           var val = rowData["PROCEDURE_ID"];
                          
                           str = "";
                           if(selectedProcJSON) {
                              $.each(selectedProcJSON, function(index, value) {
                                 if (val==selectedProcJSON[index]["id"]) {
                                     str = "checked='checked'";
                                     ui.rowData[0]=true;
                                     return false;
                                 }
                            });
                           }   
                           return "<input type='checkbox' " + str + " />";
                        }
                      },

I changed it to below due to upgrade.
{ title: "<label><input type='checkbox' /></label>",align: "center", resizable: false,
                       type: 'checkbox', cls: 'ui-state-default', sortable: false,
                       dataType: 'bool',
                       cb: { all: true, header: true, select: true},
                       render: function (ui) {
                           var rowData = ui.rowData, dataIndx = ui.dataIndx;
                           var val = rowData["PROCEDURE_ID"];
                          
                           str = "";
                           if(selectedProcJSON) {
                              $.each(selectedProcJSON, function(index, value) {
                                 if (val==selectedProcJSON[index]["id"]) {
                                     str = "checked='checked'";
                                     ui.rowData[0]=true;
                                     return false;
                                 }
                            });
                           }   
                           return "<input type='checkbox' " + str + " />";
                        },
                       // editable: true
                      },

Still it is not working.
Seems like due to some change in render function, it is called for each cell click and it always makes checkbox unchecked. Please help.

[paramvir]

I assume that is remote paging, you save the checkbox values and restore them when user navigates back to the same page.

column.render callback is used to provide a different view of the underlying cell data. Your code for restoration of checkbox values is at the wrong place (column.render callback), it should be in page change/refresh event. http://paramquery.com/pro/api/pager#event-change

And please debug your code or share a complete test case (a jsfiddle) if your code still doesn't work.

[JUNZHONG]

Thanks for the quick reply. Paging is local paging in my case since I do not intend to make a round trip to server on page change.
What I did previously was when checkbox is rendered based on the saved value, I used to check/uncheck it accordingly. It worked fine with v2.0. Now since the rendering serves different purpose, I need an alternative.

[paramvir]

Please refer this demo: http://paramquery.com/pro/demos/checkbox where column.render is used to render the checkboxes based on their state.

[JUNZHONG]

Thanks that helped.

[JUNZHONG]

Another question for header checkbox -
When user comes back to the grid and if he had selected all the rows previously using header checkbox, we want to show it back to user.
This is how we do -
$grid.one("pqGrid:load", function (evt, ui) {
 if(areAllSamplesSelected) {
            $('#grid_sample .pq-grid-title-row input:checkbox')[0].checked = true;
 }
}
This does not retain the checkbox checked.
We have
cb: { all: true, header: true, select: true },

What am I missing here?

[paramvir]

You need to iterate ( for loop ) through dataModel.data in load event and reconstruct the state of checkbox fields.

Code: [Select]

var data = grid.option("dataModel.data");
for(var i=0; i < data.length; i++ ){
  var rowData = data[ i ];
  rowData[ dataIndx_of_checkbox_field ] = true;
  rowData.pq_rowselect = true; //for row selections.
}


[JUNZHONG]

perfectly what I was looking for. Great support. Thanks