Grid with group without expandable

[Deepak Jain]

Dear Team,

We have custom requirement to implement grid with grouping and (grouped + overall) aggregates with no expand feature.

Screenshot attached for ready reference.

Can you please check if its possible with syncfusion grid ?

Attachment: gridwithgrouping_8d018d8.zip

[Shalini Maragathavel]

Hi Deepak, 

Greetings from syncfusion support. 

Based on your query we suspect that you want to hide the expand/collapse icon in the Grid . You can achieve your requirement by setting the visibility property of the indent cell as hidden . For more information please refer the below code example , 

app.component.css 

.e-grid.e-indentcell,.e-recordplusexpand{ 

 

visibility: hidden !important; 

    

  

} 

Screenshot: 

 

 

Please find the  below sample for more information. 

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

In the above sample we have performed the footer aggregate for the whole Grid data. But In your attached screenshot we could see that you have performed footer aggregate for the current page. So, If you want to perform footer aggregate for the current page, we suggest you to use the custom aggregate.

Please find the  below documentation for more information.

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/aggregates/#custom-aggregate 

Please get back to us if you need further assistance. 

Regards, 

Shalini M. 

 

[Deepak Jain]

Hi,

Thanks for the update but unfortunately my requirement is not solved with your provided solution. I want Employee name to be repeated and No parent rows. Its just like a SubTotal feature provided in Microsoft Excel.

Thanks 

[Shalini Maragathavel]

Hi Deepak, 

Sorry for the inconvenience caused.

Based on your query we suspect that your requirement is to display the grouped column and to perform aggregate for all the pages in the Grid. You can achieve it by enabling the showGroupedColumn property of the Grid’s Group Settings and customagggregate Feature of Grid as demonstrated in the below code snippet, 

app.component.html

<div class="control-section"> 

<ejs-grid #grid id="grid"[dataSource]="data" [allowPaging]="true" [allowGrouping]="true" [groupSettings]="groupSettings" 

> 

    <e-columns> 

        

    </e-columns> 

    <e-aggregates> 

       

        <e-aggregate> 

            <e-columns> 

                <e-column field="UnitsInStock" type="Custom" [customAggregate]="customAggregateFn2"> 

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

                </e-column> 

             

                <e-column field="UnitPrice" type="Custom" [customAggregate]="customAggregateFn"> 

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

                </e-column> 

         

                <e-column field="SupplierID" type="Custom" [customAggregate]="customAggregateFn1"> 

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

                </e-column> 

                 <e-column field="CategoryName" type="Sum" > 

                    <ng-template #footerTemplate let-data>Total:</ng-template> 

                </e-column> 

            </e-columns> 

        </e-aggregate> 

    </e-aggregates> 

</ejs-grid> 

</div> 

--------------------------------------------------------------------
app.component.ts

export class AppComponent { 

public groupSettings: { [x: string]: Object } = { 

    showDropArea: false, 

    showGroupedColumn: true, 

    columns: ["CategoryName"] 

  }; 

 

  public ngOnInit(): void { 

    this.data = categoryData; 

  } 

 

 

  customAggregateFn(sum) { 

 

    sum = 0; 

    var grid1=(document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0]; 

    

    for(var i=0;i<grid1.getCurrentViewRecords().length;i++){ 

     sum=sum+ grid1.getCurrentViewRecords()[i].UnitPrice; 

    } 

    

    return sum; 

  } 

  customAggregateFn1(sum) { 

   

    sum = 0; 

    var grid1=(document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0]; 

    

    for(var i=0;i<grid1.getCurrentViewRecords().length;i++){ 

     sum=sum+ grid1.getCurrentViewRecords()[i].SupplierID; 

    } 

     

    return sum; 

  } 

   customAggregateFn2(sum) { 

     

    sum = 0; 

    var grid1=(document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0]; 

    

    for(var i=0;i<grid1.getCurrentViewRecords().length;i++){ 

     sum=sum+ grid1.getCurrentViewRecords()[i].UnitsInStock; 

    } 

    

    return sum; 

  } 

} 

 

Please find the  below sample for more information. 

Sample : https://stackblitz.com/edit/angular-eedorr-5ql3zb?file=app.component.ts

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/aggregates/#custom-aggregate 

API: https://ej2.syncfusion.com/angular/documentation/api/grid/groupSettings/#showgroupedcolumn 

Please get back to us if you need further assistance. 

Regards, 

Shalini M.