Как сделать детализацию гридов доступными для выбора в ag-grid - PullRequest
Новая
       20

Как сделать детализацию гридов доступными для выбора в ag-grid

0 голосов
/ 19 июня 2019

У меня есть ag-grid в форме master / detail.Я пытаюсь найти способ сделать строки в подробном представлении доступными для выбора, чтобы я мог удалить выбранную подробную строку.

В detailGridOptions я попытался установить для параметра defaultColDef rowSelection значение single.Это не похоже на работу.К сожалению, в документации ag-grid я не могу найти ссылку, которая показывает, что вы можете определить в defaultColDef.Есть только несколько примеров для конкретных случаев использования, но нет общего представления.Или я просто не могу его найти.

Мое определение сетки в компоненте: 

this.columnDefs = [
      { headerName: 'ID', field: 'batchID', cellRenderer: 'agGroupCellRenderer' },
      { headerName: 'Erstelldatum', field: 'createDateString' },
      { headerName: 'Lagerort', field: 'storedAt' },
      { headerName: 'Materialnummer', field: 'matNumber' }
    ];

    this.detailCellRendererParams = {
      detailGridOptions: {
        columnDefs: [
          { headerName: "UnitID", field: 'unitID' },
          { headerName: "Eingangsdatum", field: 'entryDateString' },
          { headerName: "Ausfalldatum", field: 'failureDateString' }
        ],
        defaultColDef: {
          rowSelection: 'single',
          filter: true
        },
        onFirstDataRendered(params) {
          params.api.sizeColumnsToFit();
        }
      },
      getDetailRowData: function (params) {
        params.successCallback(params.data.units)
      }
    }

И HTML: 

 <div class="row mt-3">
        <div class="col">
            <ag-grid-angular class="ag-theme-balham" style="width: 100%; height: 750px;" [rowData]="rowData$ | async"
                [columnDefs]="columnDefs" [rowSelection]="rowSelection" [masterDetail]="true"
                [detailCellRendererParams]="detailCellRendererParams" (gridReady)="onGridReady($event)"
                (selectionChanged)="onSelectionChanged($event)">
            </ag-grid-angular>
        </div>
    </div>

Я вставил в фильтр:true, чтобы проверить, работает ли он вообще и работает ли он.Поэтому я предполагаю, что rowSelection: 'single' не так.Я также попробовал selectable: true.

Вот скриншот сетки:

мастер / деталь ag-grid

Я хочу иметь возможностьвыбрать строки, которые отображаются внутри внутренней сетки.Те, которые имеют UnitID.Я постараюсь создать стекблиц.Хотя это может занять некоторое время, поскольку я никогда не делал этого раньше.

1 Ответ

1 голос
/ 19 июня 2019

Вам нужно иметь свойство rowSelection: 'single' на detailGridOptions вместо defaultColDef.Как только вы это сделаете, у вас может быть кнопка, которая получит вам выбранные в данный момент узлы, используя detailGridInfo.

Так что, если вы добавите кнопку: 

<button (click)="deleteSelectedRow()">Delete Selected Detail</button>

, которая вызывает функцию: 

deleteSelectedRow() {
    this.gridApi.forEachDetailGridInfo(function(detailGridApi) {
      console.log(detailGridApi.api.getSelectedRows()[0])
    });
  }

Затем вы получите подробную информацию о выбранной вами строке.

Взгляните на этот рабочий поршень.

...