ag-grid

I am working on an application built using angular2 with typescript. I am using ag-grid to display data in grid but not able to find the grid api. /// <reference path="../../../typings/jquery/jquery.d.ts" /> import {Component} from 'angular2/core'; import {Hero, HeroService} from './hero.service'; var gridOptions; var heroService; import * as core from 'angular2/core'; declare var ag: any; ag.grid.initialiseAgGridWithAngular2({ core: core }); @Component({ selector: 'gridapp', template: `<ag-grid-ng2 #gapp class="ag-fresh" style="height: 300px; width:850px" [gridOptions]="gridOptions"

I need to provide a background color for an entire row in ag grid based on a condition in a column. I found no such examples where entire row is colored based on a certain value in a column.. The previous answer is somewhat outdated (although still correct and working) and now we have some more control over the styling of the grid. You could use getRowStyle(params) for this job, just like this: gridOptions.getRowStyle(params) { if (params.data.myColumnToCheck === myValueToCheck) { return {'background-color': 'yellow'} } return null; } Obviously, myColumnToCheck would be the column you're

I am trying ag-grid in angular2 with typescript, for some reasons I am not able to use the ag-grid APIs, getting undefined error., here is the code.., import { AgRendererComponent } from 'ag-grid-ng2/main'; import { GridOptions, RowNode } from 'ag-grid/main'; import { GridOptionsWrapper } from 'ag-grid/main'; import { GridApi } from 'ag-grid/main'; public gridOptions: GridOptions; constructor() { this.gridOptions = <GridOptions>{}; alert(this.gridOptions); alert(this.gridOptions.api); // *** getting undefined *** this.gridOptions = <GridOptions>{ columnDefs: this.columnDefs(), rowData: this

I have a simple ag-grid in an Angular project and want to disable selection of cells in one of its columns. Simply removing the default blue outline during selection would also be fine. I just want no visual change to the cell when the user clicks inside it. How can I do this? I see that ColDef has a property suppressNavigable that sort of helps, since it disallows using the tab key to select the cells, but it still allows selection by clicking. Also, the grid itself seems to offer suppressCellSelection but it doesn't seem granular enough and doesn't seem to affect anything anyway. So, how can

How can I obtain and re-set the state of an ag-grid table? I mean, which columns are being show, in what order, with what sorting and filtering, etc. Update : getColumnState and setColumnState seem to be close to what I want, but I cannot figure out the callbacks in which I should save and restore the state. I tried restoring it in onGridReady but when the actual rows are loaded, I lose the state. I believe you are looking for this page of the Docs . This describes the column api and what functions are available to you. The functions that are of most relevance would be: getAllDisplayedColumns(

I am using ag-grid and for any given row I would like the dropdown in one column to be dependent on the value of a different column. Can I do that with agSelectCellEditor or do I have to create a custom component. You can define your cellEditorParams function in a way that returns different values depending on values of another column. Here is a sample from the ag-grid site - cellEditor : 'agSelectCellEditor'; cellEditorParams: function(params) { var selectedCountry = params.data.country; if (selectedCountry==='Ireland') { return { values: ['Dublin','Cork','Galway'] }; } else { return { values

I am working in some grids and I notice that the sorting on all of them is key sensitive is there any way to change that. This is a part of my code. columnDefs = [ { headerName: 'Id', field: 'id', sort: 'asc', sortable: true, filter: true, checkboxSelection: true, resizable: true, }, { headerName: 'Name', field: 'name', sortable: true, filter: true, checkboxSelection: false, editable: true, resizable: true, }, { headerName: 'Description', field: 'description', sortable: true, filter: true, checkboxSelection: false, editable: true, resizable: true, }, ]; Thank you for any possible given help.