Posted 18 July 2019, 9:09 am EST - Updated 3 October 2022, 7:51 pm EST
Hi,
I have used Wijmo 5.20171.282 version.
My application used Angular 2.X version.
I don’t want to display the values in group header except year value. How to fix this issue?
Refer screen shots,
In html:
<wj-flex-grid #paymentHistoryGrid
[itemsSource]="paymentHistoryList"
[headersVisibility]="'Column'"
[isReadOnly]="true"
[selectionMode]="'None'"
id="sampleGridWrapper" [groupHeaderFormat]="planYearHeaderFormat">
<wj-flex-grid-filter [filterColumns]="['PaymentDate','GrossAmount', 'PlanName', 'FederalTax', 'StateTax', 'Deductions', 'NetAmount']"></wj-flex-grid-filter>
<wj-flex-grid-column [header]="'Payment Date'" [binding]="'PaymentDate'" [minWidth]="140" width="15*">
<template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
<div>
{{item.PaymentDateFormat}}
</div>
</template>
</wj-flex-grid-column>
<wj-flex-grid-column [header]="'Gross Amount'" [binding]="'GrossAmount'" [minWidth]="140" width="15*" [aggregate]="'Sum'">
<template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
{{item.GrossAmount | currency:'USD':true}}
</template>
<template wjFlexGridCellTemplate [cellType]="'ColumnFooter'" let-cell="cell">
{{cell.value | currency:'USD':true}}
</template>
</wj-flex-grid-column>
<wj-flex-grid-column [header]="'Federal Tax'" [binding]="'FederalTax'" [minWidth]="140" width="15*" [aggregate]="'Sum'">
<template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
{{item.FederalTax | currency:'USD':true}}
</template>
<template wjFlexGridCellTemplate [cellType]="'ColumnFooter'" let-cell="cell">
{{cell.value | currency:'USD':true}}
</template>
</wj-flex-grid-column>
<wj-flex-grid-column [header]="'State Tax'" [binding]="'StateTax'" [minWidth]="140" width="15*" [aggregate]="'Sum'">
<template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
{{item.StateTax | currency:'USD':true}}
</template>
<template wjFlexGridCellTemplate [cellType]="'ColumnFooter'" let-cell="cell">
{{cell.value | currency:'USD':true}}
</template>
</wj-flex-grid-column>
<wj-flex-grid-column [header]="'Deductions'" [binding]="'Deductions'" [minWidth]="140" width="15*" [aggregate]="'Sum'">
<template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
<div [class.negativeAmount]="item.Deductions < 0">
{{item.Deductions | currency:'USD':true}}
</div>
</template>
<template wjFlexGridCellTemplate [cellType]="'ColumnFooter'" let-cell="cell">
<div [class.negativeAmount]="cell.value < 0">
{{cell.value | currency:'USD':true}}
</div>
</template>
</wj-flex-grid-column>
<wj-flex-grid-column [header]="'Net Amount'" [binding]="'NetAmount'" [minWidth]="140" width="15*" [aggregate]="'Sum'">
<template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
{{item.NetAmount | currency:'USD':true}}
</template>
<template wjFlexGridCellTemplate [cellType]="'ColumnFooter'" let-cell="cell">
{{cell.value | currency:'USD':true}}
</template>
</wj-flex-grid-column>
</wj-flex-grid>
In TS :
loadPaymentHistoryData(historyData: any) {
this.paymentHistoryList = new wjcCore.CollectionView(historyData);
this.paymentHistoryList.groupDescriptions.push(new wjcCore.PropertyGroupDescription('PlanYear'));
this.planYearHeaderFormat = '<b>{value}</b>';
this.paymentHistoryList.pageSize = 5;
}
Thanks,
Ramu
