SelectionMode with Selector Class and Custom Column Templates

SelectionMode with Selector Class and Custom Column Templates

Posted by: teun.kokke on 27 March 2024, 10:35 pm EST

• 

  teun.kokke

  • Post Options:
  • Link
    Copy

  Posted 27 March 2024, 10:35 pm EST

  Hi,

  I’m trying to setup FlexGrid with a checkbox pinned on the left hand side in order to configure row selection. It seems this could easiest be achieved using your Selector class:

  https://developer.mescius.com/wijmo/api/classes/Wijmo_Grid_Selector.Selector.html

  https://developer.mescius.com/wijmo/demos/Grid/Selection/CheckboxSelection/angular

  However I am using custom column templates in the html, and it seems like the default implementation of the Selector class stops working because of this. The documentation suggests that simply by instantiating a

  new Selector(grid, options)

  , it should generate this selection column on the left. But it doesn’t appear.

  As an alternative, I have tried manually creating a column, and binding the selector instance to that column. Eg.

  this.selector.column = theGrid.columns[0]

  , but then the grid seems to struggle with the selectionMode.

  First of all, my selectionMode is intended to simply be able to select the entire rows for whichever rows the checkbox was selected. However as your docs mention, the Selector class triggers a side-effect internally, modifying the original selectionMode to

  *SelectionMode.Cell*

  .

  The problem seems to be that Cell selectionMode allows the grid to select individual cells, rather than entire rows. Meaning as soon as the user tries to interact with the selection checkbox, they will also have interacted with that cell in the grid. The result being that when you try to de-select the row, the checkbox gets unchecked, but the cell gets selected. Now there appears to be a strange conflict in that the row is both “selected” because its cell is selected, while also being unselected because the checkbox is off (which’ property is bound to the row’s selector / isSelected).

  In addition, trying to set the selectionMode value back to eg. MultiRange would require timing the event. There doesn’t seem to be a way to avoid the Selector class from modifying the selectionMode, and it doesn’t even appear to do this immediately in the next iteration (setTimeout(f)), but only in some future iteration, as even with a regular setTimeout the Selector’s modification is applied.

  Could you please suggest what would be the best way to resolve this? My preference would be to avoid these problems entirely and simply have the Selector class generate the column regardless of how my existing setup looks similar to the demo.

  Thanks

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 31 March 2024, 8:26 pm EST

  Hi Teun,

  This query has already been answered on our other portal, here’s a copy of the response -

  We are not aware of the exact implementation of cell templates on your end, however, the selector checkboxes or any other default text or content in grid cells may be affected when the cell templates are used, as the cell template controls the content that should be visible in the cells, it removes the previous/default content from the cell.

  To avoid this issue, you can insert an extra column in the row headers panel, and use the first column for selector checkboxes and second column for the custom content using cell templates. Please refer to the following sample for the same - https://stackblitz.com/edit/angular-ivy-jeewxl?file=src%2Fapp%2Fapp.component.ts

  Regarding the selection mode, you can set your desired selectionMode on grid after initializing the flexgrid selector, as the Selector automatically set the grid’s selection mode to ‘Cell’. Please note that, after changing the selectionMode to ‘ListBox’ or ‘MultiRange’, you’ll observe that selected rows with checkbox selector may appear unselected when you click on any other rows, but the checkbox will still remain selected, which is the expected behavior, as the SelectionMode Cell is the most appropriate selection mode in this scenario when a Selector is used for grid selection.

  In case, you still face any issues, please modify the above sample to replicate the issue, and share it with us, so that we can have a better understanding of the issue and assist you accordingly.

  Regards