Disable checkbox in grid

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

  • 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
  • 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
  • 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

    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
  • Replied 1 December 2020, 11:19 pm EST

    Hi Ashwin,

    thank you very much for your answer! :)

    Best regards
    Moritz
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels