Как сделать заголовок сетки ag липким и отзывчивым с помощью функции изменения размера? - PullRequest
Новая
       14

Как сделать заголовок сетки ag липким и отзывчивым с помощью функции изменения размера?

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

как сделать липкий заголовок сетки ag в угловом 6?Это должно работать с функцией изменения размера?

я пробовал липкую сетку заголовков без параметров сортировки и фильтрации?я хочу, чтобы он реагировал с функцией изменения размера?

HTml: 

<div class="table-responsive">
  <ag-grid-angular style="margin-top:10px;" class="ag-theme-balham" [pagination]="true" [paginationPageSize]="paginationPageSize" [enableColResize]="true" [paginationNumberFormatter]="paginationNumberFormatter" [enableSorting]="true" [enableFilter]="true" [headerHeight] = "headerHeight" [gridAutoHeight] = "true" [overlayNoRowsTemplate]="overlayNoRowsTemplate" [rowData]="gridData" [columnDefs]="columnDefs" (columnResized)="onColumnResized($event)" (gridReady)="onGridReady($event)" (rowClicked)="onRowClicked($event)"> </ag-grid-angular>
</div>

Код машинописного текста: 


this.columnDefs = [
  { headerName: 'ID',
    field: 'Id',
    rowDrag: true,
    hide: true
  },
  { filter: 'agTextColumnFilter',
    headerName: 'Name',
    field: 'Name',
    rowDrag: true,
    cellClass: "cell-wrap-text",
    autoHeight: true
  },
  { filter: 'agTextColumnFilter',
    headerName: 'Designation',
    field: 'Designation',
    rowDrag: true,
    cellClass: "cell-wrap-text",
    autoHeight: true 
  },
  { filter: 'agTextColumnFilter',
    headerName: 'Broker',
    field: 'Broker',
    width: 100,
    cellClass: 'cell-wrap-text',
    autoHeight: true
  }];

CSS для автоматического выбора высоты: 

.cell-wrap-text {
  white-space: normal !important;
}

CSS для Sticky Header: 

.sticky_header.table-responsive {
  overflow: hidden !important;
}

.sticky_header .ag-theme-balham .ag-header-row {
  position: fixed;
  top: 270px !important;
  overflow: hidden !important;
}

.sticky_header .ag-header-container {
  z-index: 9999999;
  overflow: hidden !important;
}

.ag-body-viewport-wrapper {
  display: block;
  height: 200px !important;
  overflow-y: auto !important;
}

Ожидается: он должен реагировать с функцией изменения размера в сетке ag.

Фактически: он липкий, но не реагирует с функцией изменения размера.

1 Ответ

0 голосов
/ 24 апреля 2019

Попробуйте код ниже: 

<div class="table-responsive">
  <ag-grid-angular style="margin-top:10px; width: 100%; height: 200px;" class="ag-theme-balham" [pagination]="true" [paginationPageSize]="paginationPageSize" [enableColResize]="true" [paginationNumberFormatter]="paginationNumberFormatter" [enableSorting]="true" [enableFilter]="true" [headerHeight] = "headerHeight" [gridAutoHeight] = "true" [overlayNoRowsTemplate]="overlayNoRowsTemplate" [rowData]="gridData" [columnDefs]="columnDefs" (columnResized)="onColumnResized($event)" (gridReady)="onGridReady($event)" (rowClicked)="onRowClicked($event)"> </ag-grid-angular>
</div>
...