How to override select all functionality of Selector class in Flexgrid?

How to override select all functionality of Selector class in Flexgrid?

Posted by: abhijeet.dey on 17 September 2024, 5:30 am EST

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 September 2024, 5:30 am EST

  Hi Team,

  We are using FlexGrid with Selector class. We want to override the select all functionality of selector class, since we want to select only some rows instead of all.

  I see FlexGrid class has a function called selectAll: https://developer.mescius.com/wijmo/api/classes/Wijmo_Grid.Flexgrid.html#selectall
  
  Which can be overriden

  But this does not affect the Selector class select all checkbox. How do we override the select all checkbox functionality ?
  
  https://developer.mescius.com/wijmo/api/classes/Wijmo_Grid_Selector.Selector.html

• 

  akshay.rajput

  

  • Post Options:
  • Link
    Copy

  Posted 18 September 2024, 8:09 am EST

  Hi Abhijeet,

  You may customize the selector checkboxes by using the FormatItem event.

  For reference, Please check to the attached sample application. In the attached sample, I am using a datafield CanSelect to allow some checkboxes to be checked and some to be unchecked.
  
  I hope it helps!

  FlexGridPureJsCheckBoxSelection.zip

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy

  Posted 18 September 2024, 10:06 am EST

  So basically the select all will select all checkboxes but after that formatItem event will uncheck the ones which we don’t want, correct?

• 

  akshay.rajput

  

  • Post Options:
  • Link
    Copy

  Posted 19 September 2024, 12:21 am EST - Updated 19 September 2024, 6:05 am EST

  Hi Abhijeet,

  >> So basically the select all will select all checkboxes but after that formatItem event will uncheck the ones which we don’t want, correct?

  Yes, You can also handle onSelectionChanging and cancel the selection if canSelect is false.

  Sample Code:

    function OnSelectionChanging(e)
    {
      return  theGrid.rows[e.row].dataItem.canSelect;   
    }
  

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy

  Posted 19 September 2024, 4:51 am EST

  Hi Akshay,

  The link you gave is 404 but the solution works for me. Although I think this could be a future feature for the Selector class itself where we can override the default functionality. What do you think?

• 

  akshay.rajput

  

  • Post Options:
  • Link
    Copy

  Posted 19 September 2024, 6:06 am EST

  Hi Abhijeet,

  Here’s the updated link: https://developer.mescius.com/wijmo/api/classes/Wijmo_Grid.Flexgrid.html#onwbrselectionwbrchanging

  I have updated the link in my previous reply as well.

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy

  Posted 25 September 2024, 5:28 am EST

  Hi Akshay,

  So the solution with onSelectionChanging works for us. But there is one problem with this solution.

  Since we are not selecting all rows, the select all checkbox in the ColumnHeader row is not getting checked, which is correct behavior.

  But the problem with this is that now the user can’t click on the select all checkbox again to un-select all items, because it is never checked.

  Is there a way to force the select all checkbox be checked even though all rows are not selected ?

• 

  akshay.rajput

  

  • Post Options:
  • Link
    Copy

  Posted 26 September 2024, 3:01 am EST

  Hi Abhijeet,

  I’d suggest you to check out the previously shared sample again. In that sample I have also implemented the formatItem event in which whenever the checkbox’s state is indeterminate the checkbox’s checked is set as true. So whenever you click on the select all checkbox in the ColumnHeader row it would act as all rows are selected.

  Code snippet:

  theGrid.formatItem.addHandler((s, e) => {
      if (e.panel.cellType == CellType.TopLeft) {
        if (e.cell.firstChild)
          if (e.cell.firstChild.firstChild.indeterminate) {
            e.cell.firstChild.firstChild.checked = true;
          }
      }
      ...
      ...
      ...