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-
munity/dist/ag-grid-munity.js"></script>
<link rel="stylesheet" href="refresh_button.css">
<link rel="stylesheet" href="node_modules/ag-grid-
munity/dist/styles/ag-grid.css"?>
<link rel="stylesheet" href="node_modules/ag-grid-
munity/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>
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-
munity/dist/ag-grid-munity.js"></script>
<link rel="stylesheet" href="refresh_button.css">
<link rel="stylesheet" href="node_modules/ag-grid-
munity/dist/styles/ag-grid.css"?>
<link rel="stylesheet" href="node_modules/ag-grid-
munity/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>
-
This part doesn't work- do you see any error on browser console? – Paritosh Commented May 15, 2019 at 6:08 - Nope. No error, I even traced the data inside getModel() of ag-grid -> grid API. it shows the data correctly. – Jabed Commented May 15, 2019 at 20:29
1 Answer
Reset to default 3I 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
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745418958a4626881.html
评论列表（0条）