ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: qfinsoft on June 21, 2015, 04:41:14 am
-
I've noticed that when introducing a checkbox column (using type=checkBoxSelection), setting editable: false on the colModel does not prevent the user from checking or unchecking the box in the cell. Normally, setting editable: false on a column prevents the user from editing the value in that column without first going into edit mode (I am using row-level editing). The purpose of this particular checkbox column simply editing a true/false value, and not intended to act as a selector for the entire row. Any advice to prevent the user from changing the checked/unchecked state of the column value until the user enters edit mode on the row?
-
Please use editor: { type: 'checkbox' } to edit true/false as Discontinued column in this demo:
http://paramquery.com/pro/demos/editing
-
Unfortunately, it seems that type: 'checkbox' doesn't render checkboxes in the cell. Rather, it just shows true or false. Do I have to implement a custom editor to render a checkbox in the cell?
-
1. That is editor.type = "checkbox" and it renders checkbox only when cell is in edit mode.
http://paramquery.com/pro/api#option-column-editor
2. If you want to display checkboxes in the whole column then use column.type= 'checkBoxSelection'. beforeCheck event can be used to check editability of the cell or row and default action can be prevented by returning false.
http://paramquery.com/pro/api#event-beforeCheck
http://paramquery.com/pro/api#method-isEditableRow
http://paramquery.com/pro/api#method-isEditableCell
-
Thanks, that last bit helped! Have it working nicely now as per your advice, other than the ability to cancel a check/uncheck via the row-level rollback. Can you provide any advice there?
-
In order to rollback, changes to checkbox field need to be made through updateRow.
So here's what you can do.
return false in every beforeCheck event and do the changes yourself.
beforeCheck: function(evt, ui){
if ( isEditableRow() ){
updateRow ({ rowIndx: ui.rowIndx, row: { 'state': ! ui.rowData.state } );
}
return false;
}