Devextreme DataGrid Angular 中 dxi-group-item 的替代 getTotalSummaryValue 函数是什么？

Question

我在 Devextreme 中有一个简单的数据网格。

我的网格是可分组的，我的代码如下：

<dx-data-grid [dataSource]="dataSource"
              [columnAutoWidth]="true"
              keyExpr="taskTicketActionId"
              showBorders="true"
              height="auto"
              [scrolling]="{useNative:true}"
              [allowColumnReordering]="true"
              noDataText="{{l('NoData')}}"
              (onRowClick)="onRowClick($event)"
              (onToolbarPreparing)="onToolbarPreparing($event)"
              [rowAlternationEnabled]="true">
    <dxo-state-storing [enabled]="true" type="localStorage" storageKey="devextremeAnalyzingPlanFactDataGridStorage"></dxo-state-storing>

    <dxo-column-chooser [enabled]="true"
                        [title]="l('HiddenColumns')"
                        [emptyPanelText]="l('DragColumnHere')">
    </dxo-column-chooser>

    <dxo-group-panel [visible]="true"
                     [emptyPanelText]="l('DragColumnHereForGrouping')">
    </dxo-group-panel>

    <dxo-grouping [autoExpandAll]="false"
                  [allowCollapsing]="true"
                  expandMode="buttonClick">
    </dxo-grouping>
    <dxo-summary [calculateCustomSummary]="calculateMySummary">
        <dxi-group-item column="target"
                        summaryType="sum"
                        name="myTarget"
                        [valueFormat]="{type:'fixedPoint',precision:2}"
                        displayFormat="{0}"
                        [showInGroupFooter]="true">
        </dxi-group-item>
        <dxi-group-item column="result"
                        name="myResult"
                        summaryType="sum"
                        [valueFormat]="{type:'fixedPoint',precision:2}"
                        displayFormat="{0}"
                        [showInGroupFooter]="true">
        </dxi-group-item>
        <dxi-group-item column="percent"
                        summaryType="custom"
                        name="myPercent"
                        [valueFormat]="{type:'fixedPoint',precision:2}"
                        displayFormat="{0}"
                        [alignByColumn]="true"
                        [showInGroupFooter]="true">
        </dxi-group-item>
    </dxo-summary>

    <dxi-sort-by-group-summary-info summaryItem="count"></dxi-sort-by-group-summary-info>

    <dxo-pager [showPageSizeSelector]="true"
               [allowedPageSizes]="devExtremeDatatableHelper.predefinedRecordsCountPerPage"
               [showInfo]="true"
               [visible]="true"
               infoText="{2} {{l('Plan')}}">
    </dxo-pager>

    <dxi-column dataField="itemGroup"
                caption="{{l('ItemGroup')}}"
                [allowSorting]="true">
    </dxi-column>
    <dxi-column [allowGrouping]="true" dataField="lineNr"
                caption="{{l('LineNr')}}">
    </dxi-column>
    <dxi-column dataField="firmName"
                [visible]="false"
                caption="{{l('Firm')}}">
    </dxi-column>

    <dxi-column dataField="groupSpecialCode"
                [visible]="false"
                caption="{{l('GroupSpecialCode1')}}">
    </dxi-column>
    <dxi-column dataField="groupSpecialCode2"
                [visible]="false"
                caption="{{l('GroupSpecialCode2')}}">
    </dxi-column>
    <dxi-column dataField="groupSpecialCode3"
                [visible]="false"
                caption="{{l('GroupSpecialCode3')}}">
    </dxi-column>

    <dxi-column dataField="username"
                caption="{{l('Salesman')}}">
    </dxi-column>
    <dxi-column dataField="salesPersonHeadName"
                caption="{{l('SalesPersonHead')}}">
    </dxi-column>
    <dxi-column dataField="saleManagerName"
                caption="{{l('SaleManager')}}">
    </dxi-column>

    <dxi-column [allowGrouping]="false" dataField="target"
                [format]="{type:'fixedPoint',precision:2}"
                caption="{{l('Target')}}">
    </dxi-column>
    <dxi-column [allowGrouping]="false" dataField="result"
                [format]="{type:'fixedPoint',precision:2}"
                caption="{{l('Result')}}">
    </dxi-column>
    <dxi-column [allowGrouping]="false" dataField="percent"
                [format]="{type:'fixedPoint',precision:2}" alignment="right"
                caption="{{l('AmountPercentDecember')}}">
    </dxi-column>

</dx-data-grid>

我的自定义摘要函数如下：

calculateMySummary(options) {
    if (options.name == 'myPercent') {

       let totalResult = options.component.getTotalSummaryValue('myResult'); // always returns undefined

       let totalTarget = options.component.getTotalSummaryValue('myTarget'); // always returns undefined

       options.totalValue = (totalResult / totalTarget) * 100;
    }
}

我希望百分比为Percent = (结果/目标) * 100，但我不知道如何实现这一点。因为

getTotalSummmaryValue

函数仅适用于 dxi-total-item，但我的组件是 dxi-group-item 并且

getTotalSummmaryValue

总是为 dxi-group-item 返回未定义。

dxi-group-item 的 getTotalSummmaryValue 替代方案是什么？谢谢

Answer 1

在 dxi-group-item 上，您可以使用打开 options.summaryProcess 来计算totalValue，例如：

calculateMySummary(options) {

 if (options.name == 'myPercent') {
      switch (options.summaryProcess) {
        case 'start':
          // Initializing "totalValue" here
          options.totalValue = 0;

          break;
        case 'calculate':
          // Modifying "totalValue" here

          options.totalValue = (options.value.totalResult / options.value.totalTarget) * 100

        case 'finalize':
          // Assigning the final value to "totalValue" here
          const pipe = new DecimalPipe('he');

          options.totalValue =
            pipe.transform(options.totalValue, '1.0-0') + ' %'; // options.totalValue + ' %';
          break;
      }
    }
}