Hi @Benjith Sam
Thanks for your time.

The row is being selected with your approach, but when I tried to fetch the metadata of the row through another API by passing the row key, it shows this:
Can you please suggest a way to get the metadata of the particular row by passing key of the row to another API?

Thanks!

Hi Ben,
When I'm deserializing the JSON in GetRowDataOnSelectionChange, I am unable to get the data of the selected row in the data grid.

Hi Ben,
I'm getting extra double inverted commas in JSON on selecting a row,
Can you please suggest a way to remove extra commas?
Thanks

Hi Aman,

I guess you are passing incorrect value to the JSON input parameter from the onSelectionChanged event handler def. Can you share your oml with the implementation?

Kind regards,

Benjith Sam

Hi @Benjith Sam
Got the row data now.
Thanks for your time.
I need to disable the cell selection on clicking in the data grid, instead the entire row which is selected is to be highlighted and freeze on the screen.
So, I got that the wj-state-active and wj-state-selected is to be disabled for the data grid and aria-selected to remain as false so that a cell is not shown as selected on clicking it in data grid. 

Now, cell selection is disabled in data grid:

 Can you suggest a way so, that I can achieve the entire row selection on screen?

Hi @Benjith Sam ,
Using this JS code, I am able to select a row in DataGrid, but when I select any other row, the first selected row second selected row, both are selected.
On selecting the third row, the second row is unselected, but the firstly selected row remains selected always.
Is there a way to select only one row at a time.

Hi @Benjith Sam,

Your JS works fine, 

but the first row is selected by default, can you please provide JS which doesn't have any default row selected.

Hi @Matthias Preuter,

I came up with a solution for your use case (not sure, whether I fully understood your requirement). 

• Execute the below mentioned JS in the Grid OnInitialize screen action flow using JS node.

JS Snippet:

let grid = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId);
let gridProvider = grid.provider;
let hostElement = gridProvider.hostElement;

gridProvider.selectionMode = 3; // user can select a single row at a time.
hostElement.addEventListener('mousedown', function (e) {
    let checkboxEle = e.target.querySelector('.wj-column-selector');

    if (checkboxEle) {
        var selecteRowIndex = gridProvider.rows.map(function (row) { return row.isSelected; }).indexOf(true);
        if (selecteRowIndex != -1) {
            grid.features.selection.getMetadata(selecteRowIndex).isChecked = false;
        }

        setTimeout(() => {            
            let rowIndex = gridProvider.hitTest(e.x, e.y).row;
            let isSelected = gridProvider._rows[rowIndex].isSelected;

            if (isSelected) {
                let currentRow = gridProvider._rows[rowIndex];
                let objectName = Object.keys(currentRow._data)[0];
                let rowDataJSON = currentRow._data[objectName];
                let jsonString = JSON.stringify(rowDataJSON);
                
                setTimeout(() => {
                    $actions.SetCheckedRowData(isSelected, rowDataJSON, jsonString);
                });                
            }
            $actions.SetCheckedRowData(isSelected);                
        }, 150);
    }    
});

Demo app: DG_Single_Row_Selection_ChkBox

I hope the proposed approach may contribute in your actual implementation.

Kind regards,

Benjith Sam