Posted 8 December 2017, 3:44 pm EST
I have a flexGrid with cellTemplate on it. The problem is when adding cellTemplate, rowHeight is also increasing. I have tried to use no padding on cells to reduce cell height but it does not help much.
This is my HTML:
<wj-flex-grid
#flexLoans
class="cell-padding"
[allowAddNew]="false"
[allowDelete]="false"
[selectionMode]="2"
[autoGenerateColumns]="false"
[headersVisibility]="1"
[itemsSource]="selectedLoans"
[showMarquee]="true"
[keyActionTab]="3"
(cellEditEnded)="loansChanged(flexLoans, $event)"
(keydown)="keyDown($event)"
(beginningEdit)="beginningEdit(flexLoans, $event)"
(selectionChanging)="selectionChanging(flexLoans, $event)"
(formatItem)="formatItem(flexLoans, $event)"
>
<wj-flex-grid-column
[binding]="'teamMemberLoanId'"
[visible]="false"
>
</wj-flex-grid-column>
<wj-flex-grid-column
[dataMap]="loansMap"
[showDropDown]="true"
[header]="'Loan to Business Unit'"
[binding]="'businessUnitID'"
[width]="'150*'"
>
</wj-flex-grid-column>
<wj-flex-grid-column
[header]="'From Date'"
[binding]="'fromDate'"
[width]="'50*'"
>
<ng-template wjFlexGridCellTemplate
[cellType]="'Cell'"
let-cell="cell">
<wj-input-date
[inputType]="date"
[format]="'MM/dd/yyyy'"
[(value)]="cell.item.fromDate"
[min]="cell.item.fromDate < minDate && cell.item.fromDate !== null ? cell.item.fromDate : minDate"
[mask]="'00/00/0000'"
[isRequired]="false"
[isDisabled]="lockRow(cell.item.teamMemberID)"
(initialized)="fromDateInitialized()"
(valueChanged)="updateFromDate(cell.item)">
</wj-input-date>
</ng-template>
</wj-flex-grid-column>
<wj-flex-grid-column
[header]="'To Date'"
[binding]="'toDate'"
[width]="'50*'"
>
<ng-template wjFlexGridCellTemplate
[cellType]="'Cell'"
let-cell="cell">
<wj-input-date
[inputType]="date"
[format]="'MM/dd/yyyy'"
[(value)]="cell.item.toDate"
[min]="cell.item.fromDate ? cell.item.fromDate : minDate"
[mask]="'00/00/0000'"
[isRequired]="false"
[isDisabled]="lockRow(cell.item.teamMemberID)"
(initialized)="toDateInitialized()"
(valueChanged)="updateToDate(cell.item)">
</wj-input-date>
</ng-template>
</wj-flex-grid-column>
<wj-flex-grid-column
[header]="'Comments'"
[binding]="'comments'"
[width]="'200*'"
>
</wj-flex-grid-column>
<wj-flex-grid-column
[header]="'Delete'"
[allowSorting]="false"
[width]="75"
[align]="'center'"
[isReadOnly]="true"
>
<ng-template wjFlexGridCellTemplate
[cellType]="'Cell'"
let-item="item">
<button
ion-button icon-only clear small
[disabled]="lockRow(item.teamMemberID)"
(click)="removeLoan($event, item.teamMemberLoanId, flexLoans)">
<ion-icon name="trash"></ion-icon>
</button>
</ng-template>
</wj-flex-grid-column>
</wj-flex-grid>
my css:
.cell-padding .wj-cell {
padding-top: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
padding-left: 5px !important;
}
and here is my out put:
- with padding set to 0px
- not set padding, use default
- no cell template
as you can see, the with space of cell-grid-editor is always much shorter then cell height. How can I set it to match with cell height or recude cell height to match with cell-grid-editor? Thank you very much.
