We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Aggregate Fucion With Inline and batch Editing

Thread ID:

Created:

Updated:

Platform:

Replies:

150277 Dec 30,2019 04:11 PM UTC Jan 15,2020 07:13 AM UTC Angular - EJ 2 7
loading
Tags: Grid
Pardeep Pandit
Asked On December 30, 2019 04:11 PM UTC

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 




Thanks



Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 31, 2019 06:50 AM UTC

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); 
  } 



 
Please get back to us, if you need further assistance. 
 
Regards, 
Seeni Sakthi Kumar S 


Pardeep Pandit
Replied On December 31, 2019 11:27 AM UTC

Hello Seeni Sakthi Kumar 

Thanks for your support my problem is resolved.


Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On December 31, 2019 11:47 AM UTC

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
Replied On January 9, 2020 12:10 PM UTC

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 [Syncfusion]
Replied On January 13, 2020 12:45 PM UTC

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}' 
            }] 
        } 
        ]; 
    } 
} 
 


Regards, 
R.Dhivya 


Pardeep Pandit
Replied On January 14, 2020 10:06 AM UTC

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 [Syncfusion]
Replied On January 15, 2020 07:13 AM UTC

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. 




Regards, 
R.Dhivya 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon