Aggregate Fucion With Inline and batch Editing

[Pardeep Pandit]

I am checking your angular grid aggregate funcion. But when i am checking (Reactive aggregate update) and (Refresh aggregates in inline edit mode) then its preview not showing.

My question is that can i check these two preview if yes please provide me link.

I provide below link where i had checked 

https://ej2.syncfusion.com/angular/documentation/grid/aggregates/#refresh-aggregates-in-inline-edit-mode

Thanks

[Seeni Sakthi Kumar Seeni Raj]

Hi pardeep, 

Greetings from the Syncfusion support, 

We could see you would like Reactive aggregate with inline editing in the Syncfusion Grid component. We are also facing the preview problem in this Documentation section and it is a cause of the problem as CSS reference. We will fix that problem in our upcoming release. Until then we suggest you use to provide a sample with Reactive aggregate in the inline editing in Angular platform. Please refer to the below code example and sample for more information. 

[app.component.html] 

 <ejs-grid #grid [dataSource]="data" [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)="actionBegin($event)"> 

        <e-columns> 

         .        .         .       . 

        </e-columns> 

        <e-aggregates> 

            <e-aggregate> 

                <e-columns> 

                    <e-column type="Sum" field="Freight" format="C2"> 

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

                    </e-column> 

                </e-columns> 

            </e-aggregate>         

        </e-aggregates> 

    </ejs-grid> 

[app.component.ts] 

  public actionBegin(args): void { 

    if (args.requestType === 'beginEdit') { 

      this.selectedRecord = {}; 

      this.selectedRecord = args.rowData; // store the edited row data 

    } 

  } 

  public changeFn(args: any) { 

    const Freight = 'Freight'; 

    this.selectedRecord[Freight] = args.value; // update the edited value of Frieght in stored row date 

    this.grid.aggregateModule.refresh(this.selectedRecord); 

  } 

Sample link: https://stackblitz.com/edit/angular-vn3b9t-9e6nkb?file=app.component.html 

 

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

 

Regards, 

Seeni Sakthi Kumar S 

[Pardeep Pandit]

Hello Seeni Sakthi Kumar 

Thanks for your support my problem is resolved.

[Seeni Sakthi Kumar Seeni Raj]

Hi Pardeep,

Thanks for the update.  

  

We are happy to hear that your reuirement has been achevied and you are good to go.  

  

Regards,  

Seeni Sakthi Kumar S 

[Deepak Jain]

Hi Sakthi,

This is working with Static Column Binding but not with dynamic column binding.

<e-columns>

            <ng-template #template ngFor let-column [ngForOf]="headerColumnList" let-i="index">

                <e-column [headerText]="column.headerText" [width]="column.width" textAlign='Center'

                    *ngIf="column.columnType=='SERIALNO'" [visible]="column.visible" [hideAtMedia]="column.hideAtMedia">

                    <ng-template #template let-d>

                        <div>{{ +d.index+1 }}</div>

                    </ng-template>

                </e-column>

                <e-column class="disabled" *ngIf="column.columnType=='CHECKBOX'" type='checkbox' width='30'>

                </e-column>

                <e-column *ngIf="column.columnType=='IMAGE'" [width]="column.width">

                    <ng-template #template let-data>

                        <div class="rowphoto-size"

                            [ngClass]="{'noimage-size':data.IMAGE_URL=='' || data.IMAGE_URL==null || data.IMAGE_URL=='undefined'}">

                            <img src="{{data.IMAGE_URL=='' || data.IMAGE_URL==null || data.IMAGE_URL=='undefined'? 'assets/img/NoImage.png':  data.IMAGE_URL}}"

                                (click)="imageClick(data.IMAGE_URL)">

                        </div>

                    </ng-template>

                </e-column>

                <e-column [field]="column.field" [headerText]="column.headerText" [allowEditing]="column.allowEditing"

                    [isPrimaryKey]="column.isPrimaryKey != null ? column.isPrimaryKey : null" [width]="column.width"

                    *ngIf="column.columnType=='CLICKABLE'" [hideAtMedia]="column.hideAtMedia"

                    [textAlign]='column.textAlign'>

                    <ng-template #template let-data>

                        <a class="blue d-block" rel='nofollow' href="javascript:void(0)"

                            (click)="onCellClick(data, column)">{{data[column.field]}}</a>

                    </ng-template>

                </e-column>

                <e-column [headerText]="column.headerText" [width]="column.width"

                    *ngIf="column.columnType=='ICONBUTTON'" [hideAtMedia]="column.hideAtMedia"

                    [textAlign]='column.textAlign'>

                    <ng-template #template let-data>

                        <a *ngIf="(column.field==null && data.IsDeleted=='1') || data.IsDeleted==undefined || column.field=='Register'"

                            class=" blue text-decoration" rel='nofollow' href="javascript:void(0)" (click)="onCellClick(data, column)">

                            <i [ngClass]="column.iconClass.ClassName" [style.color]="getIconButtonFontColor(column)"

                                [style.font-size.px]="getIconButtonFontSize(column)"> </i>

                        </a>

                    </ng-template>

                </e-column>

                <e-column [textAlign]='column.textAlign' [field]="column.field" [headerText]="column.headerText"

                    [allowEditing]="column.allowEditing"

                    [isPrimaryKey]="column.isPrimaryKey != null ? column.isPrimaryKey : null" [width]="column.width"

                    *ngIf="column.columnType=='TEXT'" [visible]="column.visible" [columns]="column.columns"

                    [hideAtMedia]="column.hideAtMedia" [format]='column.format' [valueAccessor]="valueAccessor">

                </e-column>

          

            </ng-template>

        </e-columns>

        <e-aggregates>

            <e-aggregate>

                <e-columns>

                    <ng-template #template ngFor let-column [ngForOf]="aggregatesColumnList" let-i="index">

                        <div class="grid-footer">

                            <e-column *ngIf="column.isTotal && column.footerFormula=='' && column.width>1"

                                [format]='column.format' [field]="column.field" type="sum" [textAlign]='Right'>

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

                            </e-column>

                            <e-column *ngIf="column.isTotal && column.footerFormula=='' && column.width<1"

                                [format]='column.format' [field]="column.field" type="sum" [textAlign]='Right'>

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

                            </e-column>

                            <e-column *ngIf="!column.isTotal && column.footerFormula!=''" [field]="column.field"

                                type="Custom" [customAggregate]="footerValueAccessor" [textAlign]='Right'>

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

                            </e-column>

                            <e-column *ngIf="column.isTotal && column.footerFormula!=''" [format]='column.format'

                                [field]="column.field" type="sum" [textAlign]='Right'>

                                <ng-template #footerTemplate let-data>{{footerSumWithCustom(data, column)}}

                                </ng-template>

                            </e-column>

                            <e-column *ngIf="!column.isTotal && column.footerFormula==''" [field]="column.field"

                                type="sum" [textAlign]='Right'>

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

                            </e-column>

                        </div>

                    </ng-template>

                </e-columns>

            </e-aggregate>

        </e-aggregates>

[Dhivya Rajendran]

Hi Deepak, 

Thanks for contacting us. 

We have validated the provided information and code example. Since grid columns are Array of Object but Aggregate columns are Array of Object array(nested array), so that the values are not properly mapped to aggregate columns.  

We suggest you to use the below way to achieve your requirement. Please refer the below code example and sample for more information. 

<div class="control-section"> 

    <ejs-grid #grid [dataSource]='data' height=400 [aggregates]="aggregateColumn" *ngIf='columns.length'[allowPaging] = 'true'> 

            <e-columns> 

      <ng-template #colsTemplate  ngFor let-column [ngForOf]="columns"> 

             <e-column [field]="column.field" >         

            </e-column> 

       </ng-template> 

    </e-columns> 

    </ejs-grid> 

</div> 

. . . 

  this.aggregateColumn =  [{ 

            columns: [ 

              { 

                type: 'Sum', 

                field: 'Freight', 

                format: 'C2', 

                footerTemplate: 'Sum: ${Sum}' 

            } 

            ] 

        }, 

        { 

            columns: [{ 

                type: 'Average', 

                field: 'Freight', 

                format: 'C2', 

                footerTemplate: 'Average: ${Average}' 

            }] 

        } 

        ]; 

    } 

} 

 

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

Regards, 

R.Dhivya 

[Pardeep Pandit]

Not working with below example in batch edit mode.

<div class="control-section">

    <ejs-grid #grid [dataSource]='data' height=400 [aggregates]="aggregateColumn" *ngIf='columns.length'[allowPaging] = 'true'  [editSettings]="editSettings">

            <e-columns>

      <ng-template #colsTemplate  ngFor let-column [ngForOf]="columns">

             <e-column [field]="column.field"  [allowEditing]=true>        

            </e-column>

       </ng-template>

    </e-columns>

    </ejs-grid>

</div>

import { Component, OnInit } from '@angular/core';

import { orderDetails } from './data';

@Component({

    selector: 'app-root',

    templateUrl: 'app.component.html'

})

export class AppComponent {

    public data: Object[] = [];

    public columns : Object[];

    public aggregateColumn: Object[];

    public editSettings;

    ngOnInit(): void {

        this.editSettings = { allowEditing: true, mode: 'Batch' };

        this.data = orderDetails;

    this.columns = [{ field: "OrderID"},

    { field: "CustomerID", },

    { field: "CustomerName"},

     { field: "Freight"}]

  this.aggregateColumn =  [{

            columns: [

              {

                type: 'Sum',

                field: 'Freight',

                format: 'C2',

                footerTemplate: 'Sum: ${Sum}'

            }

            ]

        },

        {

            columns: [{

                type: 'Average',

                field: 'Freight',

                format: 'C2',

                footerTemplate: 'Average: ${Average}'

            }]

        }

        ];

    }

      customdata (args) {

          debugger

        }

}

[Dhivya Rajendran]

Hi Pardeep, 

Thanks for your update. 

We have validated the provided information and we suspect that you are not applied primary key column in grid. To perform CRUD action its necessary to define isPrimaryKey as true for column in Grid. We have attached a sample for your reference. 

Here we have enabled isPrimaryKey for column in dataBound event you can also use conditional operator and enable primary key for columns in Grid to perform the CRUD actions. 

Sample : https://stackblitz.com/edit/angular-dynamic-aggregate-5zpv3l?file=app.component.ts 

Help documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#batch 

https://ej2.syncfusion.com/angular/documentation/grid/columns/?no-cache=1#set-primary-key-column-for-auto-generated-columns-when-editing-is-enabled 

Regards, 

R.Dhivya