Data Grid template multiple groups

[Cesar Smerling]

Hi! I'm testing some angular componentes for our project and I wanted to know if there is a wat to template the grouping "row" so we can add a combo box and button depending on the group.

I attacht a file with an screenshot on what we have.

Thanks

Attachment: Screenshot_8_7f8f83df.zip

[Manivel Sellamuthu]

Hi Cesar, 

Thanks for your update. 

Before proceeding your query, we would like to clarify some details, 

1. Share the Grid package version
2. Please share the Grid code

If you are using EJ2 Angular DataGrid component, you can achieve your requirement by using groupCaptionTemplate. Inside the group caption ng-template we can define the add the elements which will be rendered in Each group row. please refer the below documentation link to achieve your requirement. 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/aggregates/#group-and-caption-aggregate 

Regards, 

Manivel 

[Cesar Smerling]

Hi, the Grid component is the Data Grid or could be in the Tree Grid too. We are evaluating wich components feats more for our needs.

The Image that I share is the grid that actually we have and is in another company grid (Wijmo Flex Grid).

In wijmo I achived what I want with this code:

In wijmo you can check with "GroupHeader" cell type the "row" that contains the group info. With item (groupHeader object) item.groupDescription.propertyName I can check if, in my case, is node, accessory, material, component (different nested groups). I want to add in this "rows" some combo box and buttons that depend on the group. 

Thanks.

<ng-template wjFlexGridCellTemplate
             [cellType]="'GroupHeader'" let-row="row" let-item="item" let-cell="cell">
    <div class="d-inline-flex container-fluid px-0 align-items-center">
        {{hideEmptyGroupHeaders(item, row)}}
        <a class="ml-1" (click)="row.isCollapsed= !row.isCollapsed">
            <i *ngIf="row.isCollapsed" class="fas fa-caret-right"></i>
            <i *ngIf="!row.isCollapsed" class="fas fa-caret-down"></i>
        </a>
        <div *ngIf="item.groupDescription.propertyName == 'node'"
             class="d-inline-flex container-fluid align-items-center">
            <b class="scs-group-grid-title font-weight-bold">{{item.name}}</b>
            <wj-combo-box class="scs-grid-combo-box scs-group-grid-form-control" style="margin-left: 42px;"
                          #nodeStateCombo
                          [isRequired]="true"
                          [isEditable]="false"
                          [displayMemberPath]="'localizedLabels.'+currentLang"
                          [itemsSource]="nodeStateDS[item.name]"
                          (gotFocus)="comboGotFocused = true"
                          (selectedItemChange)="changeNodeStateDataSource
                              (comboGotFocused, $event, item.name, source.sourceCollection)"
            >
            </wj-combo-box>
            <button *ngIf="hasNodeDynamicAccessories(item.name)"
                    class="btn btn-light btn-sm mx-3 py-0" style="font-size: 0.8rem;"
                    (click)="openAccessoryEditor(item.name)"
                    [disabled]="disabledCombo(nodeStateCombo)"
                    [ngbTooltip]="'btn.OpenAccessoryEditor' | translate"
                    container="body">
                <i class="fas fa-tasks"></i>
            </button>
        </div>
        <div *ngIf="item.groupDescription.propertyName == 'accessoryId'
            && item.items[0].accessory"
             class="d-inline-flex container-fluid align-items-center">
            <div class="font-weight-bold scs-group-grid-title">
                {{getAccessoryGroupDescriptor(item.items[0].accessory)}}
            </div>

            <wj-combo-box class="scs-grid-combo-box scs-group-grid-form-control" style="margin-left: 28px;"
                          #combo
                          [isRequired]="true"
                          [isEditable]="false"
                          [displayMemberPath]="'localizedLabels.'+currentLang"
                          [itemsSource]="
                          getNodeContentDataSourceSet(item.items[0],nodeContentDS)"
                          (clickAction)="dropDown(combo)"
                          (gotFocus)="comboGotFocused = true"
                          (selectedItemChange)="
                          changeNodeContentDataSource(comboGotFocused,
                          $event,item.items[0],source.sourceCollection)"
            >
            </wj-combo-box>

        </div>

</ng-template>

[Cesar Smerling]

Hi!, looking at the link you send me I see that this is posible with the GroupCaptionTemplate

Thanks

[Manivel Sellamuthu]

Hi Cesar, 

Thanks for your update. 

Yes, it is possible to achieve the requirement by using groupSettingsCaptionTemplate and groupCaptionTemplate. We have prepared  a simple sample reflecting the attached image. Please find the below sample for more information. 

Sample: https://stackblitz.com/edit/angular-152160?file=app.component.html 

Please get back to us, if you need further assistance. 

Regards, 

Manivel 

[Cesar Smerling]

Thanks!

[Manivel Sellamuthu]

Hi Cesar, 

Thanks for your update. 

Please get back to us, if you need further assistance. 

Regards, 

Manivel