Как отключить весь столбец в ag-grid

Question

Я хочу отключить весь столбец на основе определенного условия, что столбец содержит событие onCellClicked, но я не хочу, чтобы он запускался

Answer 1

Используя gridOptions.isRowSelectable, мы можем установить, какую строку можно выбрать или не выбирать.Ниже приведен пример из самой документации ag-grid.gridOptions.isRowSelectable: function(rowNode) { return rowNode.data ? rowNode.data.year < 2007 : false; }

Answer 2

Вы должны определить editable свойство в colDef

editable: false <-- edit would be disabled for needed column

Обновлено

Флажок заголовка можно использовать для строки-выбор, для других вещей, вы должны создавать собственные обработчики самостоятельно.

Для обработки отображения необходимо создать cellRenderer

Для обработки редактирования необходимо создать собственную cellEditor

На основании официальной демонстрации :

Вот пример работы для вашего случая DEMO

cellRenderer - флажок будет отображаться в виде значка

import {Component} from "@angular/core";
import {ICellRendererAngularComp} from "ag-grid-angular";

@Component({
    selector: '',
    template: `
    <div class="checkbox-container">
        <span *ngIf="params.value == true" title='true' class='ag-icon ag-icon-tick content-icon'></span>
        <span *ngIf="params.value == false" title='false' class='ag-icon ag-icon-cross content-icon'></span>
        <span *ngIf="!params.value"></span>
    </div>
    `
})
export class CheckboxRendererComponent implements ICellRendererAngularComp {
    private params: any;

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

    refresh(params):boolean{
      return true;
    }
}

cellEditor - двойной щелчок по ячейке обеспечит режим редактирования (если это возможно, на основе colDef - editable свойство)

import {Component} from "@angular/core";
import {ICellEditorAngularComp} from "ag-grid-angular";

@Component({
    selector: '',
    template: `<input type="checkbox"  [(ngModel)]="checkboxValue">`,
})

export class ChekboxEditorComponent implements ICellEditorAngularComp {

    private params: any;
    private checkboxValue:boolean;


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

    refresh(params):boolean{
      return true;
    }

    getValue(){
      return this.checkboxValue;
    }
}

И последнее: editable: (params)=>{return params.node.data.checkbox != true}

здесь есть логика, которая отключит режим редактирования значений true в column