How to Retrieve Data from DataGridComponent in a Dashboard?

[jacky.wu]

Hi,

I read this topic:
viewtopic.php?t=53056
and the API Reference to understand that DataGrid can use getJSON() to retrieve the current DataGrid data.

However, my DataGrid is part of a Dashboard, and I accessed the DataGridComponent using board.getComponentByCellId().
Is there a similar method available in DataGridComponent to retrieve the data?

Here’s my component option:

Code: Select all

{
    renderTo: "dashboard-col-2",
    connector: {
        id: "micro-element",
    },
    type: "DataGrid",
    sync: {
        highlight: true,
        visibility: true,
    },
    dataGridOptions: {
        credits: {
            enabled: false,
        },
    },
}

[dawid.d]

Hello,

Thanks for the question!

You can get the DataGrid from DataGridComponent and then call getJSON(). See the demo: https://jsfiddle.net/BlackLabel/hgmLx3u7/

If you want to get data directly from connector, you can do it this way: https://jsfiddle.net/BlackLabel/awsc831f/

Let me know if it helped!

Best regards,

[jacky.wu]

Hi Dawid,

Thank you for your response.

I found that using the following code works correctly to get the dataGrid and call getJSON():

Code: Select all

useEffect(() => {
    if (config) {
        Dashboards.board("demo", config, true).then(board => {
            const component = board.getComponentByCellId("dashboard-col-2");
            console.log(component.dataGrid.getJSON());
        });
    }
}, [config]);

However, if I use the following code:

Code: Select all

useEffect(() => {
    if (config) {
        boardRef.current = Dashboards.board("demo", config);
        ExportData(boardRef.current);
    }
}, [config]);

const ExportData = (board) => {
    console.log('connector data:', board.getComponentByCellId("dashboard-col-2"));
    console.log('connector data:', board.getComponentByCellId("dashboard-col-2").dataGrid);
};

The dataGrid is undefined. Interestingly, when I inspect board.getComponentByCellId("dashboard-col-2"), I can see that dataGrid exists:
https://imgur.com/a/RFyqxBQ

Why is there a difference between these two approaches?

Additionally, I would like to bind a button to get the data. If the first approach is required to get the dataGrid, it seems like I won't be able to easily bind this functionality to a button. Do you have any suggestions for this?

Thank you for your help!

[jacky.wu]

Hi Dawid,

Please disregard my previous long question—I’ve already found a solution.
Thank you for providing your method, it helped!