ag-grid-angular

问题 I'm using AG Grid on a website. When the user clicks a cell, it is focused and gets a blue outline. I need to remove this focus when the user clicks outside the selected element. const body = document.body; body.addEventListener('mouseup', (e) => { const container = this.commonAgGrid.nativeElement; if (!container.contains(e.target)) { this.gridApi.clearFocusedCell(); } }); But this is not working when I am using mat select component in ag-grid. Example- plunker Please change the dropdown

问题 I currently have html table with inline editing that uses plain Angular Reactive Forms, including a lot of validation rules: var formArray = new FormArray(this.items.map(createItemFormGroup)); createItemFormGroup(item){ return new FormGroup({ prop1: new FormControl(item.prop1, [Validators.required, Validators.min(1)]) prop2:... }) } Is there any example of how to integrate ag-grid with Angular validations? The requirement is, that I need to highlight invalid cell values. I don't necessarily

问题 This question is related to Ag-Grid row height on Angular 4 Project. Please see the below scenario:- I have an Ag-Gird having 3 columns respectively:- Id (resizable column from UI) Name (resizable column from UI) Address (resizable column from UI) I do not have any limitations( like the limited number of character or words is allowed) on Address column. Users can type any number of characters or words they want to. Issues:- How to increase the row height, when Address column width is

问题 I use Ag-Grid together with Angular and I would like to listen to any event that modify column state. As of now, I have to list all events: (columnVisible)=onCol($event) (columnMoved)=onCol($event) etc. Is there a generic or higher-level event I could rely on in order to listen to any change to column state? 回答1: There's addGlobalListener , listed here. There's an example: https://www.ag-grid.com/javascript-grid-column-definitions/#column-api-example Here's the relevant code from the Angular

问题 I am following the Ag-Grid master detail docs, and trying to get both the master and detail grid columns to align and stay in sync as mentioned in the aligned grid docs. But it appears not to work with master detail layout. I went debugging Ag-grid alignedGridService and found that the passed grid config is supposed to have a grid API reference which is used to bind grid events across both grids, // iterate through the aligned grids, and pass each aligned grid service to the callback const

问题 I have built this simple grid: The user chooses an option from List 1 in ParenColumn. Depending on which option he chose, different lists will be displayed in column 2. For example, if he chooses option3 then list 3 will be displayed in the second column in the corresponding row. The problem is: Since the customCellRenderer in column two is applied to all the rows then The same list will be shown in All the rows as you see in the picture. My question is: Is it possible to "give" each row its

问题 I have been struggling with making a simple listener work inside of a cell in ag-grid. What's bothering me is that it works perfectly if I place it in the html file. In app.component.html: <select class="form-control" (change)=" RefreshRisqueBrutColumn();" > <br> <option>1- Très improbable</option> <option>2- Peu probable</option> <option>3- Possible</option> <option>4- Probable</option> </select> In app.component.ts, I have the listener definition: public RefreshRisqueBrutColumn() { const

问题 I have two columns defined in my ag-Grid: { headerName: 'Active', field: 'active', sortable: true, enableCellChangeFlash: true, editable: true, cellEditor: 'popupSelect', cellEditorParams: { cellRenderer: ActiveCellRenderer, values: ['Active', 'Inactive'] }, width: 100 }, { headerName: 'Category', field: 'payeeCategory', sortable: true, width: 100, checkboxSelection: true, editable: function (params) { return (params.node.data.scheduleId === 0); }, cellEditor: 'popupSelect', cellEditorParams:

问题 I have an ag-grid where rows are grouped by two columns by default, but the groups are collapsed. colDefs = [ { field: 'colA', rowGroupIndex: 0, }, { field: 'colB', rowGroupIndex: 1 }, … ]; I would like to have the first group level expanded like this: - ColA 1 + COlB 1 (5) + ColB 2 (3) - ColA 2 + COlB 3 (1) + COlB 4 (9) + COlB 5 (11) Where is the best place to expand the first level groups? 回答1: Have a look at the plunk I've created: ag-grid: expand groups in ag-grid-angular this.gridApi

问题 I have grid which I want to export: initializeColumnDefs() { this.columnDefs = []; this.columnDefs.push({ headerName: 'time, field: 'completedTimestamp', cellRenderer: (params: any) => { if (params.data.isMomentarily) return ''; return DatagridComponent.DefaultDatetimeCellRenderer(params); }, comparator: (valueA: number, valueB: number) => { return DatagridComponent.DefaultDatetimeCellComparator(valueA, valueB); } }, { headerName: 'people', field: 'people', cellRenderer: (params: any) => { if