Author Topic: CheckBox Selection issues  (Read 4922 times)

lsl

  • Pro Deluxe
  • Jr. Member
  • *
  • Posts: 67
    • View Profile
CheckBox Selection issues
« on: July 17, 2014, 08:28:39 am »
Dear

We are trying to use checkbox selection functions of pqgrid.
But we find out that belows situation cannot be done.

1. Multiple Selection columns, if we create more than 1 column of checkbox selection (script like below), when users tick BOX1, both BOX1 and BOX2 will be ticked.
{ title: "BOX1", dataIndx: "state1", width: 30, minWidth:30, align: "center", type:'checkBoxSelection', cls: 'ui-state-default', resizable: false, sortable:false }
{ title: "BOX2", dataIndx: "state2", width: 30, minWidth:30, align: "center", type:'checkBoxSelection', cls: 'ui-state-default', resizable: false, sortable:false }

2. Disable the use of checkboxes for certain rows, we can control the state true/false of the checkboxes in the datarow
however, we cannot disable the use of checkboxes for certain rows only, some row we have to show them to users, but it is not allowed to take any action to these rows.

could you help?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: CheckBox Selection issues
« Reply #1 on: July 17, 2014, 10:03:43 am »
your use cases are outside the scope of type = 'checkBoxSelection'

you have to customize column.render callback function to implement these steps.

1) Not sure why you need 2 checkboxes to select a single row, but if you do then add a field in rowData which stores the state of selection i.e., true/false. In column.render callback check rowData['state'] and display checked / unchecked checkbox accordingly. Also use cellClick event to select/ unselect row whenever checkbox cell is clicked.

2) Add another field in rowData which marks whether to display checkbox i.e., {'display_checkbox': true }. In column.render callback check the value of rowData[ 'display_checkbox' ] to display checkbox.

Edit:
================
You don't need to add a field / property in rowData to check or store the state of selection. You may use rowData['pq_rowselect'] for the same.

So the flow is:

cellClick event ->

1) toggle the value of rowData['pq_rowselect'] i.e., if it's true then make it false and if it's false then make it true.
2) refresh the whole row.
3) and return false.

column.render callback:

if rowData['pq_rowselect'] then display a checked checkbox otherwise return unchecked checkbox.
« Last Edit: July 17, 2014, 04:52:19 pm by paramquery »

lsl

  • Pro Deluxe
  • Jr. Member
  • *
  • Posts: 67
    • View Profile
Re: CheckBox Selection issues
« Reply #2 on: July 23, 2014, 12:17:56 pm »
A new issue about the checkboxColumn,

if it was put a checkboxColumn, for the add mode of the grid, the checkboxColumn becomes an input box after called "$grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });"
For the case of Edit Mode, if use mouse click the checkboxColumn, it is fine. However, if I go to  the next column and press shift tab, it also becomes an input box.

How to avoid this?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: CheckBox Selection issues
« Reply #3 on: July 23, 2014, 12:22:01 pm »
checkboxColumn should be editable: false

http://paramquery.com/pro/api#option-column-editable

lsl

  • Pro Deluxe
  • Jr. Member
  • *
  • Posts: 67
    • View Profile
Re: CheckBox Selection issues
« Reply #4 on: July 29, 2014, 02:58:42 pm »
back to my top question.

maybe I describe what I have to do first and you can suggest the way of using pqgrid to do it.
we tried to use checkboxselection is because it looks very close to what we want
the only limitation is it cannot display more than 1 column of this checkbox.


1. at least we need 3-5 checkboxes in a single line which like the display of checkboxselection, users can single click on it to check or uncheck it.
2. Each box should have a check for all box on the top, so that users can click one to check all boxes in the same column