92
Views
3
Comments
Solved
Get cell data in Data Grid when data is passed as JSON.

I am passing JSON data in grid so I haven't defined any columns. I want that when clicking a cell on grid I get that cell's column's name, row's name and cell data. I tried using OnCellClick Event but it didn't work.

2019-09-30 07-35-56
Aurelio Junior
Solution

Hello,

It looks like you can only use the "OnCellClick" event when you manually define the columns. However, there's a workaround for this using JavaScript. Use the following script in your screen's "OnReady" event, passing as input parameter your Grid's ID:

var grid = document.getElementById($parameters.DataGridId);
grid.addEventListener("click", (e) => {
    var hti = OutSystems.GridAPI.GridManager.GetGridById(grid.id).provider.hitTest(e);

    /* Write to the console details about the Column. */
    console.log(hti.panel.columns[hti.col]);

    /* Write to the console details about the Row. */
    console.log(hti.panel.rows[hti.row]);

    /* Write to the console details about the row's data source object. */
    console.log(hti.panel.rows[hti.row].dataItem);
});

Of course, you'll have to adapt this code to use the cell, column and data object details according to your requirements, instead of just writing them to the console.

UserImage.jpg
Aman Singh Rajput

Hello,

That's exactly what I needed. Now, I am able to retrieve column's and row's name.

 Thanks and Regards.

2023-11-20 06-53-17
Neha Rathore

Hi Aman,

Can you please share OML so that it will be helpful to understand your issue.

Or you can refer to this discussion 

https://www.outsystems.com/forums/discussion/88888/outsystems-data-grid-get-a-particular-column-data-as-a-list-onfilterschange/

Hope this helps.

Thanks

2019-09-30 07-35-56
Aurelio Junior
Solution

Hello,

It looks like you can only use the "OnCellClick" event when you manually define the columns. However, there's a workaround for this using JavaScript. Use the following script in your screen's "OnReady" event, passing as input parameter your Grid's ID:

var grid = document.getElementById($parameters.DataGridId);
grid.addEventListener("click", (e) => {
    var hti = OutSystems.GridAPI.GridManager.GetGridById(grid.id).provider.hitTest(e);

    /* Write to the console details about the Column. */
    console.log(hti.panel.columns[hti.col]);

    /* Write to the console details about the Row. */
    console.log(hti.panel.rows[hti.row]);

    /* Write to the console details about the row's data source object. */
    console.log(hti.panel.rows[hti.row].dataItem);
});

Of course, you'll have to adapt this code to use the cell, column and data object details according to your requirements, instead of just writing them to the console.

UserImage.jpg
Aman Singh Rajput

Hello,

That's exactly what I needed. Now, I am able to retrieve column's and row's name.

 Thanks and Regards.

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