Skip to Content (Press Enter)
2025-12-04 09-01-03
Kiet Phan
Champion
112Views
3Comments
Solved
[OutSystems Data Grid] How to make Checkbox selection inside the cell
Question
DataGrid
Forge
outsystems-data-grid
Reactive icon
OutSystems Data Grid (O11)
Forge asset by OutSystems

Hi everyone, 

My customer want selection checkbox like below picture:

I read this document and set selection mode to Cell by javascript. But it doesn't work. Can any one suggest me an idea. Thank you very much !

https://developer.mescius.com/blogs/wijmo-2020-v1-release-flexgrid-checkbox-selector-column


Thank you very much !

0
0
04 Jul 2024
Copy Link
2025-12-04 09-01-03
Kiet Phan
Champion
Solution

Hi everyone,

I've found the solution:

let myGrid = OutSystems.GridAPI.GridManager.GetGridById("theGrid").provider;

// Add checkboxes to the "Select" column

flexGrid.formatItem.addHandler(function (s, e) {

    if (e.panel === s.cells && e.col === 0) {

        e.cell.innerHTML = '';

        var checkbox = e.cell.firstChild;

        var item = s.rows[e.row].dataItem;

        if (!item.IsSelected) {

              item.IsSelected = false;

        }

        checkbox.checked = item.selected;

        checkbox.addEventListener('change', function (event) {

            item.selected = checkbox.checked;

        });

    }

});



See solution in context
2
0
09 Jul 2024
Copy Link
2023-03-08 10-32-19
Vinod Kumar R

Hi @Kiet Phan ,

You can use the Grid properties to get the Checkbox.

You can also bind the below classes to Product Name column to show Select & Unselect.

"<i class='icon fa fa-square-o'></i>" - UnSelect

"<i class='icon fa fa-check-square-o'></i>"  - Select

Regards,

Vinod

0
0
04 Jul 2024
Copy Link
2025-12-04 09-01-03
Kiet Phan
Champion

Thank for your response.

The RowHeader option's result is Checkbox Column fixed like this. But my customer want the checkbox inside the cell.

Expecting :

0
0
05 Jul 2024
Copy Link
2025-12-04 09-01-03
Kiet Phan
Champion
Solution

Hi everyone,

I've found the solution:

let myGrid = OutSystems.GridAPI.GridManager.GetGridById("theGrid").provider;

// Add checkboxes to the "Select" column

flexGrid.formatItem.addHandler(function (s, e) {

    if (e.panel === s.cells && e.col === 0) {

        e.cell.innerHTML = '';

        var checkbox = e.cell.firstChild;

        var item = s.rows[e.row].dataItem;

        if (!item.IsSelected) {

              item.IsSelected = false;

        }

        checkbox.checked = item.selected;

        checkbox.addEventListener('change', function (event) {

            item.selected = checkbox.checked;

        });

    }

});



2
0
09 Jul 2024
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.