[flexGrid] Enable/disable Checkbox-based Selection based on conditions

Posted by: khandakartareq.alam on 10 October 2021, 9:24 pm EST

  • Posted 10 October 2021, 9:24 pm EST - Updated 3 October 2022, 12:21 pm EST

    Hello Team,

    Currently, we are using DataGrid Reactive from OutSystems which is based on wijmo flexgrid.

    https://www.outsystems.com/forge/component-overview/9764/data-grid-reactive

    https://www.grapecity.com/wijmo/demos/Grid/Selection/CheckboxSelection/purejs

    We need to show the checkbox-based Selection for bulk select.

    We have achieved that by the following code.

     var grid = GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider;
    grid.columnHeaders.rows.defaultSize = grid.cells.rows.defaultSize;
    var selector = new wijmo.grid.selector.Selector(grid);
    grid.selectionMode = wijmo.grid.SelectionMode.MultiRange;
    

    With the above way, the checkbox-based selection is showing and working properly.

    Then, there is another requirement which is disable certain checkbox selection based on some cell value. For example: if product price is less than 50, then the checkbox-based selection on that row would be disabled and can not be checked unless the cell value is changed.

    We have tried with some code and be able to achieve that also.

    The Grid is enabling and disabling the checkbox-based selection based on cell value properly at initial display.

    But the problem is when we scroll the grid vertically the disabled checkbox are being enabled automatically even if the cell value does not meet the conditions.

    Please check the attached image for the problem.

    Could you please help me with how to achieve this requirement using pure JS?

    Thank you.

    Best regards,

    Alam

  • Posted 11 October 2021, 8:11 am EST

    Hello,

    Please refer to the sample link below demonstrating, how you could disable rowHeader checkboxes based on some conditions:

    https://stackblitz.com/edit/js-sq2j81?file=index.js

    Please make sure to handle the selectAll checkbox indeterminate state, (in the given scenario) when you select all rows using the selectAll checkbox as some rowHeaders checkbox are disabled the selectAll checkbox will remain at the indeterminate state.

    Let us know if that’s works for you. If you still face any issues then do let us know.

    Regards

  • Posted 18 October 2021, 8:56 pm EST

    Hello Sonu,

    Sorry for my late response.

    Thank you for the implementation method.

    We have followed the demonstration and it seems almost everything from our requirements are working.

    We will continue to test all the use cases and let you know if we face any problems.

    Thank you.

    Best regards,

    Alam

  • Posted 19 October 2021, 8:46 am EST

    Hello,

    Sure, feel free to contact us in case you face any issues. We would be happy to help you.

    Regards

    Sonu Kumar Pandey

  • Posted 28 August 2024, 4:31 am EST - Updated 28 August 2024, 4:37 am EST

    Hi @sonu.pandey

    I have the same scenario for my project. My question is adding a class to disable the whole cell the correct way accessibility wise? I don’t see aria-disabled=“true” getting added to the input checkbox. Only tab-index -1 is added.

    Secondly the input checkbox element is not available while we are in the formatItem event. At that time the cell is empty. Which event can be read to format after the checkbox is rendered?

  • Posted 29 August 2024, 2:57 am EST

    Hi Abhijeet,

    No, there isn’t any known issue that would affect accessibility when disabling the rowHeader cell with a checkbox. You can choose to disable either the checkbox or the entire cell to meet your requirements.

    Regarding the aria-disabled=“true” attribute, the wj-state-disabled class doesn’t add this attribute by default. If you want to include it for disabled checkboxes, you can manually update the attribute along with applying the disabled class.

    In the sample I shared earlier, I was able to access the selector checkboxes from the rowHeader cells within the formatItem handler. Could you please refer to the updated sample below and let me know if there’s anything I missed in replicating your issue?

    Sample: https://stackblitz.com/edit/js-sl2hdc?file=index.js

    Regards

  • Posted 29 August 2024, 9:30 am EST

    Hi

    Can you try to make column zero as the selector column and then see ? I think it works for RowHeader but not main columns.

  • Posted 30 August 2024, 7:24 am EST

    Hi Abhijeet,

    I tried setting the Selector checkboxes in the first data column of FlexGrid, but I’m still able to access the checkboxes. Please refer to the updated sample link below:

    https://stackblitz.com/edit/js-yu8bvz?file=index.js

    Could you please share the sample in which you are facing the issue so that I can investigate it at my end and assist you accordingly? Feel free to update the above-shared sample to reproduce the issue and share it with us.

    Regards

  • Posted 2 September 2024, 4:25 am EST - Updated 2 September 2024, 4:30 am EST

    Hi Sonu, can you please share your email ID, or email me? abhijeet.dey@thomsonreuters.com

    Here is the screenshot where we can’t access checkbox element in itemFormatter/formatItem

    I can share you more details on email

  • Posted 3 September 2024, 8:38 am EST

    Hi Abhijeet,

    In that case, you can create a case on our other portal with all the necessary details. Here’s the page link for your reference - https://developer.mescius.com/my-account/my-support

    Any information shared on cases created using the above link will not be publicly available.

    Regards,

    Vivek Pannu

Need extra support?

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

Learn More

Forum Channels