Search Posts

Category: ag-grid

How to modify field value of columnDefs in AgGridReact?

how to How to modify field value of columnDefs in AgGridReact? <AgGridReact rowData={rowData} columnDefs={this.state.columnDefs} pagination={true} onGridReady={this.onGridReady} enableSorting enableFilter> </AgGridReact> In the columnDefs field status i want to change based on the status code in the image attached i have status 4 and 5 if the status is 4 i need to display as approve if the status code is 5 i need to display as rejected. I need to modify the status code to respective […]

Cannot read property ‘getActualWidth’ of undefined in ag-grid v5.0.6

On switching/moving the columns, the height of table goes on increasing and it gives the error – Cannot read property ‘getActualWidth’ of undefined. var colDef = [ { headerName: “Athlete”, field: “athlete”, width: 150, }, { field: “age”, headerName: “Age”, }, { field: “country”, headerName: “Country”, width: 150 } ]; var rowData=[{“athlete”:”Michael Phelps”,”age”:23,”country”:”United States”}, {“athlete”:”Phelps”,”age”:20,”country”:”United Kingdom”}] this.myGridHeader = { columnDefs: colDef, rowData: rowData, enableColResize : true, enableSorting : false, debug : false, rowHeight : 0, […]

unnecessary horizontal scroll bar coming inspite of using sizeColumnsToFit in ag-grid

I have upgraded my ag-grid version from 7.2.0 to v14.2.0. When I use sizeColumnsToFit() api with onGridReady or onGridSizeChanged event, it works but it keeps unnecessary horizontal scroll, may be due to wrong calculation of grid width. This issue(?) can be seen at official example for ag-grid as well here, https://www.ag-grid.com/javascript-grid-responsiveness/#example-example1 With the previous version, this works completely fine without any horizontal scroll. When I manually call $scope.gridOptions.api.sizeColumnsToFit(), then it removes the horizontal scroll. Here […]

Ag-grid-enterprise Aggregate two columns

I am using ag-grid, in aggregate function for Lead To enquiry Ratio , i want the below calculation (total lead * total enquiry / 100) ie. aggregation of data from other columns. I tried using cellRenderer but it did not work. Please help me how to go about it. Below is my column code : var columnDefs = [ {headerName: “Zone”, field: “zone”,cellRenderer: ‘group’, enableRowGroup: true, enablePivot: true,rowGroupIndex: 0,hide:true}, {headerName: “Lead”, field: “lead”,aggFunc: sumFunction, showOriginal:true,cellStyle: […]

AngularJS – Override CSS

I’ve inherited an AngularJS project which uses the 3rd party grid, Ag-grid. There is an ag-grid-style.css file that has the following: .ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-viewport.hasCategoryCol .ag-row .ag-cell { width: calc(100% / 7) !important; } This works great for the grid already in use, the grid is nicely divided into 7 columns. My problem is I have created new code, also using ag-grid, but I need the new grid divided into 6 columns, not 7. I end […]

Angular 2 ag-grid’s Clear Filter button clears the textbox without refreshing column when built-in filter is used

When ag-grid’s default filter is enabled, the clear filter button only clears the text box and doesn’t refresh the column even though ‘clearButton’ and ‘applyButton’ params are set to true. After clicking the Clear filter button the text gets cleared from the textbox and I have to actually click Apply Filter button to remove the filter and refresh the column. Below is my code: result.filter = “date”; result.filterParams = { applyButton: true, clearButton: true }; […]

button click should display data in <div> using cellRenderer in ag-grid

I have ag-grid table. I am replacing ‘Bookingxml’ column data with button. When that button is clicked, it should show the data of that particular cell in ‘out’ div. I went through the documentation and figured, cellRenderer is the way to do it. I tried below code, but that didn’t work. var gridOptions = { columnDefs: [ {headerName: ‘Booking Type’, field: ‘BookingType’, width: 200}, {headerName: ‘Booking Error’, field: ‘BookingError’, width: 150 }, {headerName: ‘Booking Date’, […]

"__agComponent" (CellComp) missing in eGridCell after update to 13.1.0

I updated ag-grid from 12.0.2 to 13.1.0, now one of my custom renderers doesn’t work because __agComponent from type CellComp in the attribute eGridCell is missing. Reverted back to 12.0.2 and everything was back to normal. The project uses AngularJS but the renderers are plain JavaScript. You can see the difference in the return params of CellComp.prototype.createRendererAndRefreshParams in ag-grid.js Is this an intentional change or an bug? Where would I find the old functionality? Source: […]