Problem with footers and Angular 9

[Jose Luis Garcia]

Hi,

I've updated a project to angular 9 and Syncfusion libraries to 17.4.51 version from angular 8 and 17.4.50 versions.

All works fine without errors, but I have a problem with footers in grid as you can see in next image:

Every column footer appear in a diferent row.

However, header appears right as next image:

This is the grid definition:

      <ejs-grid #invoicesGrid id="invoicesGrid" [dataSource]="invoices" [allowSorting]="true" [allowMultiSorting]="true"

                [allowGrouping]="true" [groupSettings]="{ columns: ['partner'] }"

                [allowFiltering]="true" [filterSettings]="filterOptions"

                [allowExcelExport]="true" (excelQueryCellInfo)="excelQueryCellInfo($event)"

                [toolbar]="toolbarOptions" (toolbarClick)="onToolbarClick($event)"

                [showColumnChooser]="true" width="auto" height="300">

        <e-columns>

          <e-column field="invoiceCode" headerText="Factura" width="150"></e-column>

          <e-column field="invoiceDate" headerText="Fecha" type="date" format="yMd" [allowFiltering]="false" width="100"></e-column>

          <e-column field="company" headerText="Compañía" width="100" clipMode="EllipsisWithTooltip"></e-column>

          <e-column field="partner" headerText="Partner" width="150" clipMode="EllipsisWithTooltip"></e-column>

          <e-column field="customer" headerText="Cliente" width="150" clipMode="EllipsisWithTooltip"></e-column>

          <e-column field="salesman" headerText="Comercial" width="100" clipMode="EllipsisWithTooltip"></e-column>

          <e-column field="projectCode" headerText="Proyecto" width="150" clipMode="EllipsisWithTooltip">

            <ng-template #template let-data>

              <a [routerLink]="['/projects/project-edit', data.projectId, 0]" target="_blank">{{ data.projectCode }}</a>

            </ng-template>

          </e-column>

          <e-column field="description" headerText="Descripción" width="200" clipMode="EllipsisWithTooltip"></e-column>

          <e-column field="quotationCode" headerText="Presupuesto" width="150" clipMode="EllipsisWithTooltip"></e-column>

          <e-column field="amount" headerText="Importe" type="number" format="C" textAlign="Right" width="125"></e-column>

          <e-column field="hardwareAmount" headerText="Producto" type="number" format="C" textAlign="Right" width="125"></e-column>

          <e-column field="otsServicesAmount" headerText="OTS" type="number" format="C" textAlign="Right" width="125"></e-column>

          <e-column field="recurrentServicesAmount" headerText="Soporte" type="number" format="C" textAlign="Right" width="125"></e-column>

          <e-column field="cloudServicesAmount" headerText="Cloud" type="number" format="C" textAlign="Right" width="125"></e-column>

          <e-column field="gp" headerText="GP" type="number" format="C" textAlign="Right" width="125"></e-column>

          <e-column field="gpPercentage" headerText="GP %" type="number" format="P2" textAlign="Right" width="100"></e-column>

          <e-column field="estimatedGP" headerText="GP Estimado %" type="number" format="P2" textAlign="Right" width="100"></e-column>

          <e-column field="estimatedCost" headerText="Coste Estimado" type="number" format="C" textAlign="Right" width="100" [visible]="false"></e-column>

        </e-columns>

        <e-aggregates>

          <e-aggregate>

            <e-columns>

              <e-column field="amount" type="sum" format="C" textAlign="Right">

                <ng-template #groupCaptionTemplate let-data>{{ data.sum }}</ng-template>

              </e-column>

              <e-column field="amount" type="sum" format="C" textAlign="Right">

                <ng-template #footerTemplate let-data>{{ data.sum }}</ng-template>

              </e-column>

              <e-column field="gp" type="sum" format="C" textAlign="Right">

                <ng-template #groupCaptionTemplate let-data>{{ data.sum }}</ng-template>

              </e-column>

              <e-column field="gp" type="sum" format="C" textAlign="Right">

                <ng-template #footerTemplate let-data>{{ data.sum }}</ng-template>

              </e-column>

              <e-column field="gpPercentage" type="Custom" format="P2" [customAggregate]="customAggregateGPFn" textAlign="Right">

                <ng-template #groupCaptionTemplate let-data>{{ data.Custom }}</ng-template>

              </e-column>

              <e-column field="gpPercentage" type="Custom" format="P2" [customAggregate]="customAggregateGPFn" textAlign="Right">

                <ng-template #footerTemplate let-data>{{ data.Custom }}</ng-template>

              </e-column>

              <e-column field="estimatedGP" type="Custom" format="P2" [customAggregate]="customAggregateEstimatedGPFn" textAlign="Right">

                <ng-template #groupCaptionTemplate let-data>{{ data.Custom }}</ng-template>

              </e-column>

              <e-column field="estimatedGP" type="Custom" format="P2" [customAggregate]="customAggregateEstimatedGPFn" textAlign="Right">

                <ng-template #footerTemplate let-data>{{ data.Custom }}</ng-template>

              </e-column>

              <e-column field="estimatedCost" type="sum" format="C" textAlign="Right">

                <ng-template #groupCaptionTemplate let-data>{{ data.sum }}</ng-template>

              </e-column>

              <e-column field="estimatedCost" type="sum" format="C" textAlign="Right">

                <ng-template #footerTemplate let-data>{{ data.sum }}</ng-template>

              </e-column>

            </e-columns>

          </e-aggregate>

        </e-aggregates>

      </ejs-grid>

Any idea about this issue?

Regards

Jose

[Jose Luis Garcia]

Hi, any advise regarding this issue?

Thanks a lot

[Magesh Sabapathi]

Hi Jose 

Greetings from Syncfusion support 

Query : Problem with footers and Angular 9. 

Thanks for your patience 

We have analyzed your query and we could reproduce the same issue at our end. So we have confirmed that the reported behavior “Aggregate column footers appears in different row in Angular 9” is an issue.  At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our next upcoming release. 

Until then we appreciate your patience 

Regards 

Magesh