标签: ag-grid

我需要根据列中的条件为ag网格中的整行提供背景颜色.我没有找到这样的例子,其中整行是根据列中的某个值着色的.

我在angular2中设置ag-grid工作正常,但我无法获得所选行的值...我的控制台窗口中没有错误......这就是我初始化网格的方式......

import {Component} from 'angular2/core';


@Component({
selector: 'aggride',
template: `

<div class="tr-card" >
<ag-grid-ng2  #agGrid of mgrid   class="ag-fresh"   rowHeight="40px"    
               [columnDefs]="columnDefs" 
                [rowData] = "rowData"
     enableCellExpressions="true"  
 enableSorting="true"  
  unSortIcon="true"
rowSelection="single"
(getSelectedRows) = "getSelectedRows()"
(onSelectionChanged) = "onSelectionChanged()"
>
</ag-grid-ng2>
</div>
`,
directives: [(<any>window).ag.grid.AgGridNg2],
})

这个我的代码在类中获取所选值

export class AgGride {
gridOptions = {
    columnDefs: 'columnDefs',
    rowData: 'rowData',
    rowSelection: 'single',
    getSelectedRows: 'getSelectedRows',
    onSelectionChanged: 'onSelectionChanged'
};

columnDefs = [
    { headerName: "Make", field: "make", editable: true },
    { headerName: "Model", field: "model", editable: true },
    { headerName: …

如何在 ag-grid 中添加或删除一行，
我试试这个，但不起作用

$scope.gridOptions.rowData.push(data);

有了这个

scope.gridOptions.api.forEachNode( function(node) {
    var data = node.data;
    updatedNodes.push(vehicle);
});

$scope.gridOptions.api.refreshRows(updatedNodes);

谢谢

我在Angular 2中实现Ag Gird.我有一个日期列和日期排序和Ag网格只需要格式的日期类型.因此,我必须以日期的形式发送它以进行渲染.但我的输入是字符串.我的格式为2017-01-19的dateString.我正在做

let myDate:Date = moment(dateString).toDate();

但它是我2017年1月19日00:00印度标准时间的产出.我也是这样试过的

let myDate:Date = moment(dateString).format("DD/MM/YYYY");

这给了我错误字符串不能分配给日期.

也是这样尝试过的

let myDate:Date = moment(dateString,"DD/MM/YYYY");

但没有运气.我想要的是,输出的类型为日期和19-01-2017的形式

请建议

实现了ag-grid,并定义了一个数据源.

但是没有调用数据源,如何执行数据源

这是html

<div class="col-md-12" *ngIf="rowData.length > 0">  
    <ag-grid-angular #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
        [gridOptions]="gridOptions"
        [columnDefs]="columnDefs"    
        [rowData]="rowData"
        [datasource] = "dataSource"
        enableColResize
        enableSorting
        enableFilter
        rowSelection="single"
    ></ag-grid-angular>
</div>

组件定义了网格

import { Component } from '@angular/core';
import { FormGroup, FormControl } from "@angular/forms";
import {GridOptions} from "ag-grid/main";
import {Http, Headers} from '@angular/http';
import * as AppUtils from '../common/app.utils';



@Component({ 
    selector: 'incident-search',
    templateUrl: 'app/search/iSearch.component.html'
})
export class ISearchComponent {
    myForm: FormGroup;
    rowData: Array<IncidentHeaderModel> = new Array<IncidentHeaderModel>();

    gridOptions = <GridOptions>{
        context: {},
        rowModelType: 'pagination', …

假设我们需要设置ag-grid组件的自动高度,可以通过设置gridOptions来轻松完成domLayout="autoHeight".这适用于单个组件,但对于可以扩展高度的主 - 细节(父/子)组件,这不起作用.

同样的问题:https: //github.com/ag-grid/ag-grid/issues/205

我需要深入调整它的CSS,但仍然无法使其工作,

样式参考:https://www.ag-grid.com/javascript-grid-styling/

Ag grid DOM布局:https://www.ag-grid.com/javascript-grid-width-and-height/#gsc.tab=0

重现示例:https: //github.com/ag-grid/ag-grid-vue-example(参见主/详细信息)

它要么调整gridOptions,要么调整getRowheight它的嵌入式CSS

对于相关的CSS:

.ag-root {
/* set to relative, so absolute popups appear relative to this */
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
/* was getting some 'should be there' scrolls, this sorts it out */
  overflow: hidden;
}

.ag-body {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
} …

我正在使用ag-grid,我有一个列定义如下:

{
    headerName: "Color",
    valueGetter: function (params) {
        return JSON.parse(params.data.color).name;
    },
    field: 'color',
    cellRenderer: function (params) {
        if (angular.isDefined(params.data) && angular.isDefined(params.data.color)) {
            var color = JSON.parse(params.data.color);
            return '<div style="width: 50px; height: 18px; background-color:' + color.htmlValue + ';"></div>';
        }
    },
    suppressMenu: true,
    suppressSorting: true
}

当我以CSV格式导出网格时,我得到了颜色列的未定义,这是一个单元格渲染器,我搜索了一个解决方案,我在官方文档中找到了这个:

将使用原始值而不是单元格渲染器的结果,这意味着:

• 不会使用Cell Renderers.
• 将使用Value Getters.
• 不使用Cell Formatters(使用processCellCallback).

正如您所看到的,我已经在使用valueGetter,但我总是在颜色列的导出数据中未定义.

我怎么解决这个问题？

正如标题所暗示的那样，我将 ag-grid 与 Angular 一起使用，并且我使用了一个实现 IServerSideDatasource 的自定义类，用于从设置为“serverSide”的 rowModelType 的 API 中获取数据。

问题是，当我将 headerCheckboxSelection 和 checkboxSelection 设置为 true 时，复选框选择出现在每一行旁边但它没有出现在标题中，而当我使用客户端行模型类型时它工作得很好。

任何人都可以帮忙吗？

我有一个像这样的聚合组件：

  private gridOptions = {
    columnDefs: this.columnDefs,
    frameworkComponents: { buttonRenderer: ButtonRenderer},
    pagination: true, 
    paginationPageSize: 20,
    cacheBlockSize: 20,
    // server side paging
    rowModelType: 'infinite',
    datasource: this.dataSource
   };

  private dataSource: IDatasource = {
    getRows: (params: IGetRowsParams) => {
      var query = { startrow: params.startRow,
                    endrow: params.endRow,
                    company_name: this.companyName,
                    company_address: this.companyAddress,
                    company_capital: this.companyCapital
                  };
      this.http.post(environment.api_url + "/register/search",query).subscribe((results:any) => {
        params.successCallback(results.data, results.totalRecords);
        this.gridApi.refresh();
      });            
    }
  };

aggrid首次加载时，显示正常。如果我按下一页，我收到此错误：

ERROR Error: "ag-Grid: cannot get grid to draw rows when it is in the middle
of drawing …

我试图在使用cellRenderer创建的按钮的click事件上调用服务方法时遇到此问题.

我正在使用带有Angular2的ag-grid.

{ headerName: 'Update', field: "update", width: 80, cellRenderer : this.updateRecord }


updateRecord(params) {
    var eDiv = document.createElement('div');
    eDiv.innerHTML = '<span class="my-css-class"><button class="edit">Edit</button></span>';
    var eButton = eDiv.querySelectorAll('.edit')[0];
    eButton.addEventListener('click', function() {
      this.myService.getAll().subscribe(data => console.log(JSON.stringify(data)))
    });
    return eDiv;
  }

我收到以下错误:

EXCEPTION: Cannot read property 'getAll' of undefined

此外,我无法访问任何我的组件变量.