Ag-grid отключить кнопку из определенной строки

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

grid.ts

this.frameworkComponents = {
  buttonRenderer: BtnRendererComponent,
  viewButtonRenderer: BtnViewRendererComponent
};
this.submissionCols = [
  {
    headerName: 'Process', field: 'id', filter: true, sortable: true, width: 100, cellClass: 'grid-cell-centered',
    cellRenderer: 'viewButtonRenderer', hide: !this.hide,

    onCellClicked: this.onBtnClick.bind(this),
  },
  {
    headerName: this.hide ? 'Request Status' : 'Review Status', width: 150,
    field: 'reviewStatus',
    filter: true,
    sortable: true
  },
  {
    headerName: 'Review Type',
    field: 'reviewType',
    filter: true,
    sortable: true
  },
  {
    headerName: 'Reviewer',
    field: 'reviewer',
    filter: true,
    sortable: true
  },
  {
    headerName: 'Request Type',
    field: 'reviewRequestItem',
    filter: true,
    sortable: true,
    hide: !this.hide
  },
  {
    headerName: 'In Reference To',
    field: 'reference',
    filter: true,
    sortable: true,
    hide: !this.hide
  },
  {
    headerName: 'Request Item',
    field: 'reviewRequestItem',
    filter: true,
    sortable: true,
    hide: this.hide
  },
  {
    headerName: 'Description',
    field: 'description',
    filter: true,
    sortable: true
  },
  {
    headerName: 'Responded',
    field: 'responded',
    filter: true,
    sortable: true,
    cellRenderer: (data) => {
      if (data.data.responded != null) {
        return moment(data.data.responded).format('MM/DD/YYYY');
      }
    }
  }

];
}

вот мой класс для viewButtonRenderer:

export class BtnViewRendererComponent implements ICellRendererAngularComp {
    params;
    label: string;
    colored: string;
    textColored: string;
    icon: string;

    agInit(params): void {
         this.params = params;
         this.label = this.params.data.id || null;
         this.colored = "red";

         if (params.column.colDef.headerName === "View") {
             this.icon = "details";
         } else {
             this.icon = "note";
         }
    }

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

    onClick($event) {
        if (this.params.onClick instanceof Function) {
            // put anything into params u want pass into parents component
            const params = {
                event: $event,
                rowData: this.params.node.data
               // ...something
            };
            this.params.onClick(params);
        }
    }
}

Я новичок в ag-grid, и мне действительно пригодилась бы рука.


angular ag-grid-angular
person Ricardo Sanchez Santos    schedule 14.04.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Непонятно, чего вы хотите добиться. Вы хотите отключить кнопку в CellRenderer, несколько кнопок из разных строк, или несколько строк, или несколько ячеек в данной строке ...

В сценарии, когда вы хотите отключить кнопку в определенной строке из-за некоторого глобального состояния сетки или состояния компонента, на котором размещена эта сетка, вы должны передать это условие в свой модуль визуализации как переменную (как указано Шараньей) либо как cellRendererParams

gridOptions: GridOptions = {
    ...,
    columnDefs: [
        ...,
        {
            headerName: 'Responded',
            field: 'responded',
            filter: true,
            sortable: true,
            cellRenderer: (data) => myCustomRenderer(data),
            cellRendererParams: { condition: myCondition }
        }
    ]
}

или как контекст, содержащий самого родителя с доступом к переменной / условию и возможность напрямую общаться с родителем

gridOptions: GridOptions = {
    ...,
    context: {
        parent: this
    }
}

Это хорошо объясняется в официальном документе. Затем в компоненте рендерера вы проверяете условие отключения кнопки с учетом вашей строки. В моем примере, который вы можете найти здесь, я хочу отключить кнопку ОК пока проверка не будет завершена и пройдена для формы, состоящей из строки.

Надеюсь, это поможет.

person grenobnik    schedule 15.04.2020

arrow_upward
1
arrow_downward

Имейте в своем рендерере переменную, которая будет проверять, передается ли определенное значение от родителя, и отключать кнопку ur с тегом [disabled] в html рендерера ячеек.

Возможный дубликат этого:

как-условно-включить-отключить-ячейку- рендерер в сетке

Сообщите мне, если это сработает

person Sharanya    schedule 14.04.2020
comment
но я не хочу, чтобы отключалась вся сетка, всего несколько полей, если у меня 5 полей данных, возможно, 2 должны быть отключены из-за условия - person Ricardo Sanchez Santos; 14.04.2020
comment
Это относится только к этой конкретной ячейке. В любом случае вы будете передавать только param.node или param.value. Вы можете создать скрипт или плагин, чтобы я мог редактировать и показывать вам, если он вам нужен. - person Sharanya; 14.04.2020