I am new to Ag-Grid. I am using it in JavaScript. I am learning about master/detail grids.
I'm wondering if you are able to populate a detail grid with row data outside of the initial initialization.
For example, in my snippet I have this statement whit sets data for all the detail Grids:
getDetailRowData: function (params) { params.successCallback(params.data.callRecords); } Now what if I didn't have that statement there in the grid options declaration, this would cause my detail grids to have no data. would it be possible to populate data in the detail grids outside of the initial grid options declaration, or possibly in a separate function?? code snippet below
var gridOptions = { columnDefs: [ // group cell renderer needed for expand / collapse icons { field: 'name', cellRenderer: 'agGroupCellRenderer' }, { field: 'account' }, { field: 'calls' }, { field: 'minutes', valueFormatter: "x.toLocaleString() + 'm'" }, ], defaultColDef: { flex: 1, }, masterDetail: true, detailCellRendererParams: { detailGridOptions: { columnDefs: [ { field: 'callId' }, { field: 'direction' }, { field: 'number', minWidth: 150 }, { field: 'duration', valueFormatter: "x.toLocaleString() + 's'" }, { field: 'switchCode', minWidth: 150 }, ], defaultColDef: { flex: 1, }, }, getDetailRowData: function (params) { params.successCallback(params.data.callRecords); }, }, onFirstDataRendered: onFirstDataRendered, }; function onFirstDataRendered(params) { // arbitrarily expand a row for presentational purposes setTimeout(function () { params.api.getDisplayedRowAtIndex(1).setExpanded(true); }, 0); } // setup the grid after the page has finished loading document.addEventListener('DOMContentLoaded', function () { var gridDiv = document.querySelector('#myGrid'); new agGrid.Grid(gridDiv, gridOptions); agGrid .simpleHttpRequest({ url: 'https://www.ag-grid.com/example-assets/master-detail-data.json', }) .then(function (data) { gridOptions.api.setRowData(data); }); });<link href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css" rel="stylesheet"/> <link href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css" rel="stylesheet"/> <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script> <!DOCTYPE html> <html lang="en"> <head> <title>JavaScript example</title> <meta charSet="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <style media="only screen"> html, body { height: 100%; width: 100%; margin: 0; box-sizing: border-box; -webkit-overflow-scrolling: touch; } html { position: absolute; top: 0; left: 0; padding: 0; overflow: auto; } body { padding: 1rem; overflow: auto; } </style> </head> <body> <div id="myGrid" class="ag-theme-alpine" style="height: 100%;"> </div> <script>var __basePath = './';</script> <script src="https://unpkg.com/@ag-grid-enterprise/all-modules@25.1.0/dist/ag-grid-enterprise.min.js"> </script> <script src="main.js"> </script> </body> </html>
没有评论:
发表评论