Ag-grid отключить кнопку из указанной строки c - PullRequest
Новая
       5

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

0 голосов
/ 14 апреля 2020

В моей работе у них есть эта ag-grid в 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 и действительно могу использовать рука.

Ответы [ 2 ]

1 голос
/ 15 апреля 2020

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

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

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

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

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

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

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

1 голос
/ 14 апреля 2020

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

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

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

Дайте мне знать, если это работает

...