ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: JUNZHONG on December 15, 2015, 01:34:14 am

Title: checkbox selection with rendering
Post by: JUNZHONG on December 15, 2015, 01:34:14 am

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.

Title: Re: checkbox selection with rendering
Post by: paramvir on December 15, 2015, 05:02:07 pm

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.

Title: Re: checkbox selection with rendering
Post by: JUNZHONG on December 15, 2015, 09:19:01 pm

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.

Title: Re: checkbox selection with rendering
Post by: paramvir on December 16, 2015, 06:37:14 pm

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

Title: Re: checkbox selection with rendering
Post by: JUNZHONG on December 17, 2015, 01:41:29 am

Thanks that helped.

Title: Re: checkbox selection with rendering
Post by: JUNZHONG on December 18, 2015, 12:21:03 am

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?

Title: Re: checkbox selection with rendering
Post by: paramvir on December 18, 2015, 09:30:18 am

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


Title: Re: checkbox selection with rendering
Post by: JUNZHONG on December 18, 2015, 09:45:22 pm

perfectly what I was looking for. Great support. Thanks