CODEWITHSUNDEEP
javascripthtmlnode.jselectronag-grid
Jabed
Jabed

Reputation: 188

"setRowData" method from Grid API of ag-grid won't load any row even after the javascript object prints values

I have developed an electron app which will render a view of any .csv file using ag-grid. But if I use gridoptions.api.setRowData(data1) where data1 is a javascript array object. The app won't show any rows.

The electron app reads .csv files and save data inside a javascript array. While using ag-grid if I decide to from rowData by defining rowData as, 

    data1.forEach(element => {
        rowData.push({
            time:element.Time,
            level:element.Level,
            desc:element.Description,
            logger:element.Logger,
            device:element.ExternalDevice 
        });
    });

Here, data1 is the array and time/level/desc/logger/device are fields of rowdata. This works fine and shows data in the grid.

But if I want to design a more generic version and decide not to type the fileds in rowData, rather use gridoptions.api.setRowData(data1) to load data. This part doesn't work. 

    if(data == "MantechPro")
    {
    columnDefs = [
        {
            headerName: "Description", 
            field: "description",
            width: 500,
            minwidth: 200, 
            filter: true
        },
        {
            headerName: "ExternalDevice", 
            field: "externaldevice",
        },
        {
            headerName: "Level", 
            field: "level",
            filter: true
        },
        {
            headerName: "Logger", 
            field: "logger", 
            filter:true
        },
        {
            headerName: "Time", 
            field: "time"
        },
    ];

    var gridOptions = {
    defaultColDef:{resizable: true},
    columnDefs: columnDefs,
    //rowData: rowData,
    pagination: true, 
    paginationPageSize: 20,
    onGridReady: function (params) {
    console.log(data1);
    gridOptions.api.setRowData(data1);
    params.api.sizeColumnsToFit();
    window.addEventListener('resize', function() {
      setTimeout(function() {
        params.api.sizeColumnsToFit();
      })
    })
    }
    };

    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
    gridOptions.api.sizeColumnsToFit();

The HTML looks like this, 

    <!DOCTYPE html>
    <html lang="en" style="height:100%;">

    <head>
     <script type="text/javascript" src="node_modules/ag-grid- 
     community/dist/ag-grid-community.js"></script>
     <link rel="stylesheet" href="refresh_button.css">
     <link rel="stylesheet" href="node_modules/ag-grid- 
     community/dist/styles/ag-grid.css"?>
    <link rel="stylesheet" href="node_modules/ag-grid- 
    community/dist/styles/ag-theme-balham.css"?>
    </head>
    <body style="height:100%;">
    <button type="button" id="refresh" class="button button2">Refresh- 
    Data</button>
    <br></br>
    <div id="myGrid" style="height: 80%; width:100%; position: 
    relative;overflow: hidden;" class="ag-theme-balham"></div>
    </div>
    <script type="text/javascript" src="load_agGrid.js"></script>
    </body>

    </html>

Upvotes: 1

Views: 8570

Answers (1)

Dilani Alwis
Dilani Alwis

Reputation: 749

I think the way you have defined your column definitions are wrong.

Structure of the data object

{
    time:element.Time,
    level:element.Level,
    desc:element.Description,
    logger:element.Logger,
    device:element.ExternalDevice 
}

Structure of ColumnDefs

columnDefs = [
    {
        headerName: "Description", 
        field: "desc",
        width: 500,
        minwidth: 200, 
        filter: true
    },
    {
        headerName: "ExternalDevice", 
        field: "device",
    },
    {
        headerName: "Level", 
        field: "level",
        filter: true
    },
    {
        headerName: "Logger", 
        field: "logger", 
        filter:true
    },
    {
        headerName: "Time", 
        field: "time"
    },
];

Here the field in column def should be matched with the property name in your data object

Upvotes: 3

Related Questions