Progress® Kendo UI® for Angular Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 23 Feb 2023 06:50 by ADMIN
Matthias
Created on: 06 Nov 2019 16:47
Category: Grid
Type: Feature Request
2
Remove Group Footer and Header Templates When One Record Is in the Group

Hey Kendo Team,

 

you already have a solution in jQuery for my problem (https://docs.telerik.com/kendo-ui/knowledge-base/grid-group-remove-footer-header-one-record).

Unfortunately this solution did not work in Angular.

Desirable solution would be a flag in GroupHeaderTemplate which removes header if group size is one.

Another solution could be; allow a class field in GroupHeaderTemplate, so that we can set display to none if group size is one.

 

Best regards,

Matthias


4 comments
ADMIN
Dimiter Topalov
Posted on: 23 Feb 2023 06:50

Hello,

We are declining this request due to low customer demand.

Regards,
Dimiter Topalov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Svet
Posted on: 08 Nov 2019 08:25

Hi Matthias,

Thank you for the provided additional details.

Indeed, there is no such built-in feature allowing to achieve the desired functionality. However, the group footer could be removed when needed by using some custom JavaScript and CSS. But the group header is required in order to hold the arrow used for expanding or collapsing a group. Check the following updated example demonstrating how the group footer can be removed completely when there is just a single item within a group and the content of the group header can also be removed:

https://stackblitz.com/edit/angular-dnqoy9-f8x1rv?file=app/app.component.ts

That behavior seems to resemble the one demonstrated in the article of the Kendo UI for jQuery Grid:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-group-remove-footer-header-one-record

Please check the example and let me know in case there is something unclear or any further assistance is required for this case. Thank you in advance.

Last but not least, I will convert this ticket to be a public feature request item, so that other clients can vote for it:

https://feedback.telerik.com/kendo-angular-ui/1440989-remove-group-footer-and-header-templates-when-one-record-is-in-the-group

That will help us to track the demand for such feature and eventually provide it as a built-in functionality in a future version of Kendo UI for Angular. Thank you for the provided feedback.

Regards,
Svetlin
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Matthias
Posted on: 07 Nov 2019 16:46

Hi Svetlin,

thank you for your fast answer.

Your approach was not what I expected.

I thought more about something like that:

Your approach has just removed the content, I don't want the header and footer to be displayed at all.

 

Sorry for the confusion.

 

Best

Matthias

ADMIN
Svet
Posted on: 07 Nov 2019 08:01

Hi Matthias,

Thank you for the provided details.

One way the desired functionality can be achieved is to check the number of items per group. Angular provides the *ngIf directive, that can be used to display the footer and header templates dynamically. For example, only if the grouped items are more than 1 then the templates can be displayed. Please check the following example demonstrating such approach:

https://stackblitz.com/edit/angular-dnqoy9?file=app/app.component.ts

   <kendo-grid
        [data]="gridData"
        [pageSize]="state.take"
        [skip]="state.skip"
        [sort]="state.sort"
        [group]="state.group"
        [sortable]="{ mode: 'multiple' }"
        [pageable]="true"
        [groupable]="{ showFooter: true }"
        (dataStateChange)="dataStateChange($event)"
        style="max-height: 530px;"
    >
        <kendo-grid-column field="ProductID" title="Product ID" width="150">
        </kendo-grid-column>
        <kendo-grid-column field="ProductName" title="Product Name">
            <ng-template kendoGridGroupHeaderColumnTemplate let-group="group" let-aggregates="aggregates">
                <span *ngIf="group.items.length > 1" title="Group Header Column Template for ProductName">
                    Count: {{ aggregates.Discontinued.count }}
                </span>
            </ng-template>
            <ng-template kendoGridGroupFooterTemplate let-group="group" let-aggregates>
                <span *ngIf="group.items.length > 1" title="Group Footer Template for ProductName">
                    Count: {{ aggregates.Discontinued.count }}
                </span>
            </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Unit Price" width="200">
            <ng-template kendoGridGroupHeaderTemplate let-group="group">
                <span *ngIf="group.items.length > 1" title="Group Header Template for UnitPrice">
                    Price: {{ group.value }}
                </span>
            </ng-template>
            <ng-template kendoGridGroupHeaderColumnTemplate let-group="group" let-aggregates="aggregates">
                <span *ngIf="group.items.length > 1" title="Group Header Column Template for UnitPrice">
                    Average: {{ aggregates.UnitPrice.average }}
                </span>
            </ng-template>
            <ng-template kendoGridGroupFooterTemplate let-group="group" let-aggregates>
                <span *ngIf="group.items.length > 1" title="Group Footer Template for UnitPrice">
                    Average: {{ aggregates.UnitPrice.average }}
                </span>
            </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="Discontinued" width="120">
            <ng-template kendoGridCellTemplate let-dataItem>
                {{ dataItem.Discontinued ? "Yes" : "No" }}
            </ng-template>
            <ng-template kendoGridGroupHeaderTemplate let-group="group" let-aggregates="aggregates">
                <span *ngIf="group.items.length > 1" title="Group Header Template for Discontinued">
                    {{group.value ? 'Discontinued' : 'Not Discontinued'}}
                </span>
            </ng-template>
        </kendo-grid-column>
    </kendo-grid>

I hope this helps. Let me know in case I am missing something or any further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Create an account Log In
View
Type
Status
Category