339
Views
5
Comments
[OutSystems Data Grid] Disabling checkbox (wijmo Selector) on condition not working properly
outsystems-data-grid
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

Hello Support,
We have created the bulk select checkbox as I mentioned in this post
[Data Grid Reactive] Select rows with checkbox and bulk select

Now, there is a requirement to disable the checkbox based on some conditions.
We are being able to disable the checkbox with certain conditions. On the onInitialize events:

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;

GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider.formatItem.addHandler(function(grid, e) {
     if (e.col === 0) {
       if(grid.rowHeaders.getCellElement(e.row, 0)!== null && grid.rowHeaders.getCellElement(e.row, 0).querySelector("input").classList.contains("wj-column-selector")){
            // get the last column's value 
            var value = grid.getCellData(e.row, grid.columns.length - 1);
            
            // get the checkbox element
            var checkbox = grid.rowHeaders.getCellElement(e.row, 0).querySelector("input");
            
            // if the last columns value is not equal to 1, then disable the checkbox
            if( value === 1 ){
                checkbox.disabled = false;
            } else {
                checkbox.disabled = true;
                checkbox.checked = false;
            }
        }
    }
});


But the problem is:
When we scroll vertically, the disabled checkbox is being enabled.

May be some update is going on. What am I doing wrong?

Could you please help me with this issue.


Is there better way to display the bulk selection checkbox and disable certain selection checkbox?
Please help.

Thank you in advance.

2020-08-05 08-52-58
Ruben Goncalves

Hi @Alam,

Thank you for bring this into discussion.

This feature doesn't exist in the supported version, an although it's great to see you extending the component (event better if through a Pull Request), it also means that it falls outside of the supported scenario.

That being said, if you can share a link (for a live app with the problem), or an OML replicating the problem, that will help me or any other user of the community to see the problem and to try to help you.

Cheers,
RG

2018-12-13 07-53-54
Alam

Hello @Ruben Goncalves
Thank you.
I will share the live link and oml.
Live demo
Hope it will help the community understand the issue.

Regards,
Alam

DataGridSampleReactivev12.oml
2022-09-16 08-04-04
Bruno Martinho
Staff

Hello @Alam ,

We have been exploring this and it seems that format items event is not being triggered for the header column (the column containing the checkbox) every time you scroll.

In order to work there can't be any scroll, since wijmo flexgrid, only renders the html that is visible.

We have been checking the Selector documentation and can't find anything that helps.

We would recommend for you to ask in the Grapecity forum how is possible to achieve your requirements using pure JS. If possible we can help to implement that solution in Data Grid.

Thanks,

Bruno Martinho

2018-12-13 07-53-54
Alam

Hello Bruno-san,
As you recommended, we have asked Grapecity forum how our requirement is possible using pure JS.
They have replied as follows:


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.

With the above approach, we have tried to implement in the DataGrid as follows:

var grid = GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider; var selector = new wijmo.grid.selector.Selector(grid); GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider.formatItem.addHandler(function(grid, e) { if ( e.panel.cellType == wijmo.grid.CellType.TopLeft && e.cell.firstChild.firstChild.indeterminate ) { e.cell.firstChild.firstChild.checked = true; } if (e.panel.cellType == wijmo.grid.CellType.RowHeader) { var col = grid.getColumn("Sample_Product.Stock"); var cellData = grid.getCellData(e.row, col.index); if (cellData < 4000) { wijmo.addClass(e.cell, 'wj-state-disabled'); grid.rows[e.row].isSelected = false; e.cell.firstChild.firstChild.checked = false; } } });

With this approach everything seems to be working except when you first click on the "SelectAll", it does not check the enabled rows in the visible rows (rows those are visible without scrolling)

Grapecity also mentioned about "handle the selectAll checkbox indeterminate state". As I don't understand how to implement the selectAll, could you please take a look at the answer from Grapecity and the implementation method and let us know that whether it will be possible or not with DataGrid Reactive with this approach ?

Please let me know if you need anything regarding this request.

Thank you.
Best regards,
Alam

2022-09-16 08-04-04
Bruno Martinho
Staff

Hello @Alam ,

We are trying to understand what why this is happening.

There is this information in Wijmo:

** Note **: When you attach a Selector to a FlexGrid, it will automatically set the grid's FlexGrid.selectionMode property to SelectionMode.Cell, since that is the selection mode that makes most sense for the type of selection provided by the Selector. (The SelectionMode.ListBox mode would cause the grid to interfere with the selector's behavior.)

We believe there is a conflict between the SelectionMode that we use in DataGrid and the one that is selected by the Selector.

We'll let you know as soon as we have some more conclusions.

Thanks,

Bruno Martinho

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.