如何在 Ag-Grid 中有条件地 enable/disable 单元格渲染器？

Question

我正在使用 ag-grid 单元格渲染器，我已经为它创建了一个单独的组件。基于某些条件，我想有条件地启用或禁用单元格渲染器组件。

{ headerName：'Look up values'，字段：'LOOKUP'，可编辑：false，cellRenderer：'lookupRenderer'}

我要enable/disable'lookupRenderer'根据条件

Answer 1

我也有同样的要求，我通过内联单元格渲染器实现了这个

代码：

{ headerName: 'lookup',

    suppressMenu: true,
    width:130,
    suppressSorting: true, 
   cellRenderer: (params) => {

    const element = document.createElement('span');
    let buttonname;
    let template;
    if (params.data.USER_ROLE_END_DATE=='')
    {
      buttonname = 'Disable Role'
      template= `<button type="button" style="height: 25px;line-height: 0.5"data-action-type="Disablerole"  class="btn btn-outline-danger btn-xs btn-block" ;
      >
      ${buttonname} 
     </button>`
    }
    else
    {
      buttonname = 'Enable Role'
      template= `<button type="button" style="height: 25px;line-height: 0.5"data-action-type="Disablerole"  class="btn btn-outline-success btn-xs btn-block" ;
      >
      ${buttonname} 
     </button>`
    }


   element.innerHTML = template;
    return element;
   }

}

Answer 2

内联 cellRenderer 应该只用于简单的情况。要在自己的 cellRenderer 中实现按钮单击处理，您需要为此创建 component。

你的组件应该是这样的：

    @Component({
        selector: 'custom-button-cell',
        template: `<button [disabled]="!params.node.data.enableButton" (click)="handleClick()">{{params.value}}</button>`,
        styles: [``]
    })

    export class ConditionalRenderer implements ICellRendererAngularComp {
        private params: any;

        agInit(params: any): void {
            this.params = params;
        }

        refresh(): boolean {
           return true;
        }

       handleClick() {
          alert(`Clicked: ${this.params.value}`);
       }
    }

这里是worked plnkr

不要忘记，您的 component 应该包含在 gridOptions 内的 frameworkComponents 或作为 [frameworkComponents] html 属性。

Answer 3

渲染器模板 -

<button type="button" (click)="placeOrder($event)" >Submit</button>

渲染器组件 -

agInit(params: any) {
    this.params = params;
  }

placeOrder(event: Event): void {
    event.stopPropagation();
    this.params.onClick(..);
  }

定义 coldefs 的网格组件 -

columnDefs = [
    { headerName: '', field: "Test", cellRenderer: 'rendererName', 
      cellRendererParams: {
      onClick: this.placeOrder.bind(this)
      }
    }
private placeOrder(obj: any): void {
}

Answer 4

此代码适用于 Angular

我遇到了同样的问题。我的案例是为了防止在一个单元格上呈现删除按钮。所以，我创建了一个 cellRenderer 组件如下

// Angular

import { Component} from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
   
@Component({
  selector: 'app-icon-button-renderer',
  templateUrl: './Icon-button-renderer.component.html',
  styleUrls: ['./Icon-button-renderer.component.css'],
})
export class IconButtonRendererComponent implements ICellRendererAngularComp {
    
  params: any;
  iconName: string = "";
  hidden: boolean = false;
  agInit(params: any): void {
    this.params = params;
    this.iconName = params.iconName;
    this.hidden = this.params.node.data.name === params.preventionName;
  }
    
  refresh(params?: any): boolean {
    return true;
  }
    
  onClick(event: any) {
    if (this.params.onClick instanceof Function) {
    
      this.params.onClick(this.params);
    }
  }
}
```

IconButtonComponent 的AngularHtml模板是

<ng-template [ngIf]="hidden===false" [ngIfElse]="Nobutton" #Withbutton>
  <button mat-icon-button color="warn" (click)="onClick($event)">
    <mat-icon class="mat-18">
      {{iconName}}
    </mat-icon>
  </button>
</ng-template>
<ng-template #Nobutton></ng-template>

首先，我在 button 标签上使用 *ngIf="hidden" 和 [ngIf]="hidden" 但它不起作用，但它与 ng-template

一起使用

如何在 Ag-Grid 中有条件地 enable/disable 单元格渲染器？

How to conditionally enable/disable cell renderer in Ag-Grid?

ag-grid