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. Image for the cookie policy date

Aggregate Fucion With Inline and batch Editing

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



7 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 30, 2019 10:50 PM

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 



PP Pardeep Pandit December 31, 2019 03:27 AM

Hello Seeni Sakthi Kumar 

Thanks for your support my problem is resolved.



SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 31, 2019 03:47 AM

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 



DJ Deepak Jain January 9, 2020 04:10 AM

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>


DR Dhivya Rajendran Syncfusion Team January 13, 2020 04:45 AM

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 



PP Pardeep Pandit January 14, 2020 02:06 AM

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




DR Dhivya Rajendran Syncfusion Team January 14, 2020 11:13 PM

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 


Loader.
Live Chat Icon For mobile
Up arrow icon