Question

在Angular应用程序中，我需要在KendoUI网格页脚中显示聚合。我正在接受这个例子：
https://www.telerik.com/kendo-angular-ui/components/grid/grouping/grouping/
1）默认情况下不想显示组（TOTHRS和GE_ID） 2）需要显示kendoGridFooterTemplate“和”的总时数，以及“计数”的托特代表，但所有我能得到是TOTHRS场（kendoGridGroupFooterTemplate）组总计。
3）我从服务中获取数据，这只是返回原始数据而不是聚合请指教。这是我在组件中的代码：

public aggregates: any[] = [{ field: 'TOTHRS', aggregate: 'sum' }, { field: "GE_ID", aggregate: "count" }];

public gridState: State = {
    skip: 0,
    take: 10,
    sort: [{
        field: 'GE_ID',
        dir: 'asc'
    }],

    group: [{ field: 'TOTHRS', aggregates: this.aggregates }, { field: "GE_ID", aggregates: this.aggregates}]
    ,
    filter: {
        filters: [],
        logic: 'and'
    }
};

和html：

<kendo-grid [data]="view | async"
        [pageSize]="gridState.take"
        [skip]="gridState.skip"
        [sort]="gridState.sort"
        [group]="gridState.group"
        [sortable]="true"
        [pageable]="true"
        [groupable]="true"
        [scrollable]="'scrollable'"
        (dataStateChange)="onStateChange($event)"
        [height]="500"
        filterable="menu"
        [navigable]="true">
<ng-template kendoGridToolbarTemplate>
    <button type="button" kendoGridExcelCommand><span class="k-icon k-i-file-excel"></span>Export to Excel</button>
    <button kendoGridPDFCommand icon="file-pdf">Export to PDF</button>
    <button (click)="RefershAllData()" title="Refresh Data">Refersh</button>
</ng-template>
<kendo-grid-column field="GE_ID" title="GEID" width="150" filter="numeric">
    <ng-template kendoGridFooterTemplate 
                 let-column="column">Tot Reps:{{aggregates["GE_ID"]?.count}}</ng-template>
</kendo-grid-column>
<kendo-grid-column field="ReportDate" title="Report Date" width="220" filter="date" format="{0:MM/dd/yyyy}"></kendo-grid-column>

<kendo-grid-column field="BeginTime" title="Begin Time" width="220"></kendo-grid-column>
<kendo-grid-column field="EndTime" title="End Time" width="220"></kendo-grid-column>

<kendo-grid-column field="TOTHRS" title="Total Hours" width="220" filter="numeric">
    <ng-template kendoGridGroupFooterTemplate
                 let-group="group"
                 let-aggregates>Sum:{{aggregates["TOTHRS"].sum}}</ng-template>
    <ng-template kendoGridFooterTemplate
                 let-column="column">{{column.title}}:{{total["TOTHRS"]?.sum}}</ng-template>
</kendo-grid-column>

<kendo-grid-column field="VTOUser" title="VTO'd by" width="220"> </kendo-grid-column>
<kendo-grid-column field="TCSTimeStamp" title="Time stamp" width="220"></kendo-grid-column>
<kendo-grid-column field="LineOfBusiness" title="LOB" width="220"></kendo-grid-column>

<kendo-grid-excel fileName="VTOReport.xlsx" [fetchData]="allData"></kendo-grid-excel>
<kendo-grid-pdf fileName="VTOReport.pdf" [allPages]="true" paperSize="A4" [repeatHeaders]="true" [landscape]="true">
    <kendo-grid-pdf-margin top="2cm" left="1cm" right="1cm" bottom="2cm"></kendo-grid-pdf-margin>
    <ng-template kendoGridPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
        <div class="page-template">
            <div class="header">
                <div style="float: right">Page {{ pageNum }} of {{ totalPages }}</div>
                Multi-page grid with automatic page breaking
            </div>
            <div class="footer">
                Page {{ pageNum }} of {{ totalPages }}
            </div>
        </div>
    </ng-template>
</kendo-grid-pdf>

Angular KendoUI在网格页脚

0 个答案: