ag-grid

Is there a better way to validate a row in ag-grid than with valueSetter ? I can achieve the validation with that but I am not sure, if there is a better way. https://www.ag-grid.com/javascript-grid-value-setters/#properties-for-setters-and-parsers I want to validate two fields in the row. DateFrom and DateUntil (they are not allow to be null and DateFrom must be lower than DateUntil). There are two ways of possible validation handling: First: via ValueSetter function and Second: via custom cellEditor component I suggest that it would be better to split the logic between custom components ,

I have a problem about columnDefs change dynamically. Here is my gridOptions: $scope.gridOptions = { columnDefs: [], enableFilter: true, rowData: null, rowSelection: 'multiple', rowDeselection: true }; and when I retrive data from server: $scope.customColumns = []; $http.post('/Home/GetProducts', { tableName: 'TABLE_PRODUCT' }).success(function (data) { angular.forEach(data.Columns, function (c) { $scope.customColumns.push( { headerName: c.Name, field: c.Value, width: c.Width } ); }); $scope.gridOptions.columnDefs = $scope.customColumns; $scope.gridOptions.rowData = data.Products; $scope

Using ag-grid, is there a way to split a long header across 2 rows... A break in the columnDefs headerName: 'Long<br />Header' gets me part way there (using dev tools I can see the text has the br), however one of the surrounding elements has a height of 25px; <div class="ag-header" style="height: 25px;"> which I think causes the second line of the header to not be displayed. I wondered about using group headers as an interim to get the text split, but longer term (when I need to group) that won't be an option... Try to add the following to your CSS: .ag-header-cell-label { text-overflow: clip

I am initialising the ag-grid from the html using an onGridReady method in the component file. <div style="flex-grow:1;"> <ag-grid-angular style="float:left;width: 100%; height: 201px;margin-top:10px;" class="ag-theme-balham" [gridOptions]="gridOptions" [columnDefs]="columnDefs" (gridReady)="onGridReady($event)" [rowData]="rowData" #grid > </ag-grid-angular> </div> In my .ts file i am handling the onGridReady like below : onGridReady(params?: any) { console.log("onGridReady"); var datasource = { getRows: (params: IGetRowsParams) => { this.info = "Getting datasource rows, start: " + params

Application built on Angular and Javascript. AG-Grid editable records having 1st column as Checkbox. After making any changes say on 5 records, after selecting checkbox for any particular record, on click of button Say <button name="Undo Changes" (click) = "undoFn()/>" Need to undo the changes made, and reload the previous data for that particular records(row) only, not the entire grid. Button is not inline with all records like a seperate column. There is only 1 button that too outside the Grid Once again in short- Need To refresh only particular row whose checkbox has been checked, on click