Search Posts

Category: ag-grid

How to highlight the selected row of ag-grid?

I am working on an example from ag-grid documentation on multiple Row Selection.Below is the code from the plunkr: var columnDefs = [ {field: “athlete”, width: 150}, {field: “age”, width: 90}, {field: “country”, width: 120}, {field: “year”, width: 90}, {field: “date”, width: 110}, {field: “sport”, width: 110}, {field: “gold”, width: 100}, {field: “silver”, width: 100}, {field: “bronze”, width: 100}, {field: “total”, width: 100} ]; var gridOptions = { columnDefs: columnDefs, rowSelection: ‘multiple’, }; // setup […]

ag-Grid: unable to find cellRenderer for key xxx

I am using AG Grid Below is my code $scope.columnDefs = [ { cellRenderer: ‘childMessageRenderer’, field:”ID”, cellRendererParams: { rendererImage: ‘rain.png’ }, headerName: “Edit” }]; $scope.gridOptions = { columnDefs: $scope.columnDefs, rowData: $scope.rowData, rowHeight: 48, headerHeight: 50, onRowSelected: onRowSelected, components: { childMessageRenderer: $scope.childMessageRenderer } }; $scope.childMessageRenderer=function(params) { var rainPerTenMm = 5; return $scope.createImageSpan(rainPerTenMm, params.rendererImage); } $scope.createImageSpan=function(imageMultiplier, image) { var resultElement = document.createElement(“span”); for (var i = 0; i < imageMultiplier; i++) { var imageElement = document.createElement(“img”); imageElement.src […]

AG-GRID & AngularJS – How to edit data externally

I am working on a single page application using Agularjs, UI-Router and AG-GRID. I can’t figure out how to update AG-GRID’s data from an external form. Let me explain, from the AG-GRID data table, I added button that would grab the row data and transfert it to my form page. The form page would then populate with the data correctly. Once in the form page if I try to edit the data and go back […]

agGrid + Angular: refresh cells after request in custom expandable cell

I have a problem with refresh data cells after request into custom expandable cell component: HTML: <ag-grid-table [options]=”optionsOrgViewRoutingRules”></ag-grid-table> TS: public optionsOrgViewRoutingRules: any = <any>{ icons: { groupExpanded: ‘<i class=”mdi mdi-arrow-expand mdi-24px” />’, groupContracted: ‘<i style=”color: #428bca” class=”mdi mdi-arrow-expand mdi-24px” />’, }, rememberGroupStateWhenNewData: true, detailCellRenderer: ‘myDetailCellRenderer’, masterDetail: true, frameworkComponents: { myDetailCellRenderer: RoutingRulesExpandableRowComponent, //CUSTOM COMPONENT }, deltaRowDataMode: true, getRowNodeId: (data: any): any => { return; }, suppressCellSelection: true, suppressContextMenu: true, columnDefs: [ { headerName: this.localization.getValue(‘’), hide: […]

AngularJS: Ag-grid cellRenderer processing my datetime, and adding an hour to value?

When passing my value from my function that returns the current date time, the built in ag-grid cell renderer is adding an hour and displaying this, however the data is being loaded into the backend as the correct value which is being passed in and upon refreshing the page the time is correct. Any suggestions on how to go about fixing this? i.e function myDate(date) { if(date) { return $filter(‘date’)(new Date(date), ‘M/d/yyyy h:mm a est’) […]

Listening for cell data changes in ag-grid

I have an ag-grid with a custom checkbox renderer that adjuts the underlying data of a field. I’ve tried adding listeners for when the underlying data changes so that I can do another manipulate on the data. e.g if Column A is true, I want to set Column B to something else. The issue may be that I’m using a custom rendered that’s adjusting the data via angular attributes, e.g. I have a column defined […]

Ag-grid cell rendering to check for conditions

I am using ag-grid to display the values from database.Using cellRendering to check for conditions if there is no data i should display No Data else with data. But i see only blank when there is data.How to bind the data to the grid if there is data. var columnDefs = [ {headerName: “Athlete”, field: “athlete”, width: 150, cellRenderer: athleteCellRendererFunc}, {headerName: “Age”, field: “age”, width: 90}, ]; $scope.gridOptions = { columnDefs: columnDefs, rowData: null, angularCompileRows: […]

Initialize agGrid in AngularJS TypeScript

In a pure JS app you initialize agGrid like this: var agGrid = require(‘ag-grid’); (function(angular) { agGrid.initialiseAgGridWithAngular1(angular); angular.module(‘myApp’, []); I can’t figure out how to initialize it with an AngularJS TypeScript app. I’ve tried this: import * as angular from ‘angular’; import * as agGrid from ‘ag-grid/main’; agGrid.initialiseAgGridWithAngular1(angular); angular.module(‘myApp’, []); I’m pretty sure the initialization code is in the wrong place, but I’m not sure where to put it? Source: AngularJS

Next Page »