Disable checkbox in grid

Disable checkbox in grid

Posted by: moritz.neugebauer on 25 November 2020, 1:26 am EST

• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy

  Posted 25 November 2020, 1:26 am EST

  Dear Wijmo Team,
  
  I'm using Angular to render checkboxes in columns where datatype is boolean. Based on a few decisions the column is either editabled or readOnly.
  
  I'm using selectionChangedHandler I'm calculating the readOnly state of the cell. So there are cases in which the cell is editabled even though the column is readOnly. I'm using format Handler to let the checkbox appear disabled.
  
  

  
  private changeDisableStateFromCellWithCheckbox(e, disable: boolean) {
          if (e.cell.children.length === 1 && e.cell.children[0].localName === "label") {
              if(e.cell.children[0].children.length > 1 && e.cell.children[0].children[0] && e.cell.children[0].children[0]['type'] === 'checkbox') {
                  e.cell.children[0].children[0]['disabled'] = disable;
              }
          }
      }
  

  
  
  I have a rather strange issue: When clicking the checkbox, everything works. But when I click the cell in which the checkbox lies, but not the checkbox itself and then I click the checkbox again, the underlying data model isn't updated anymore. When I leave to cell and select another one, the data model is updated with the latest data of the checkbox.
  
  Do I need to take special care of the cell in which the checkbox is lying?
  
  Here is a small video of the behaviour. Notice the console output to see when I clicked into the cell but outside the checkbox.
  
  https://we.tl/t-wo61QSRzms
  
  Best regards
  Moritz
• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Replied 25 November 2020, 5:21 pm EST

  Hi Moritz,
  
  I was not able to replicate your issue but I can provide you an alternate solution. Instead of disabling the checkbox, add the wj-state-disabled class on the complete cell. This class will prevent any click action performed on the cell.
  
  https://stackblitz.com/edit/angular-ria8we
  
  Try this at your end and let me know if this resolves the issue.
  
  If this does not resolve the issue, can you modify the sample so that it replicates your issue?
  
  Regards,
  Ashwin
• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy

  Replied 29 November 2020, 9:57 pm EST

  Dear Ashwin,
  
  thank you for your suggestion. Good idea to disable the surrounding cell.
  
  I forked your stackblitz example to showcase the behaviour of an active cell with checkbox:
  
  https://angular-jwm5mu.stackblitz.io
  
  Below the grid you see the active state of the selected row. Click the checkbox to see the active state change. Now click into the cell containing the checkbox (but don't click the checkbox itself). Now click the checkbox again. You well see, that the active state will NOT change below the grid.
  
  To me, this looks like a bug.
  
  Best regards
  Moritz

• Marked as Answer

  

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Replied 30 November 2020, 10:36 pm EST

  Hi Moritz,
  
  This behavior is expected. When you directly click on the checkbox (before clicking on the cell), the bound data item is updated directly. But when you click on the cell, the cell goes into full edit mode and now you will need to commit the edit of the cell to actually update the bound data. To change this behavior, you can use the bigCheckboxes property of the FlexGrid. Setting this property to true will update the bound value even if you will click on the cell instead of the checkbox. Please refer to the updated sample link below:
  
  https://stackblitz.com/edit/angular-4orkja
  
  ~regards
• 

  moritz.neugebauer

  • Post Options:
  • Link
    Copy

  Replied 1 December 2020, 11:19 pm EST

  Hi Ashwin,
  
  thank you very much for your answer! :)
  
  Best regards
  Moritz