Как условно включить / отключить визуализацию ячеек в Ag-Grid?

Question

Я использую рендерер ячеек ag-grid и создал для него отдельный компонент.Исходя из некоторых условий, я хочу условно включить или отключить компонент средства визуализации ячеек.

{headerName: 'Искать значения', поле: 'LOOKUP', editable: false, cellRenderer: 'lookupRenderer'}

Я хочу включить / отключить lookupRenderer в зависимости от условий.

Answer 1

Inline 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}`);
   }
}

Здесьэто сработало plnkr

Не забывайте, что ваш component должен быть включен в frameworkComponents внутри gridOptions или как [frameworkComponents] html атрибут.

Answer 2

У меня тоже было такое же требование, и я достиг этого с помощью встроенного средства визуализации ячеек

Код:

{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;
   }

}