grid with textbox template

[Akshatha]

When I enter value in textbox, how do I bind the textbox value to the grid datasource and update the aggregate function.
Code for reference

    <ejs-grid #grid  (rowSelected)='onGridRowSelected($event)' (rowDeselected)='onGridRowDeselected($event)'>
                    <e-columns>
                        <e-column id="id-chkbx" type='checkbox' field="isSelected" width="20"> </e-column>
                        <e-column field='name' width="60" headerText='Sizes' ></e-column>
                        <e-column headerText='Size Ratio' field='qty'>
                            <ng-template #template let-data>
                                <input class="e-input" id="id-input" [(ngModel)]="data.qty" name="total" (click)="$event.stopPropagation()" (keyup)="onKeyup($event)" >
                            </ng-template>
                        </e-column>
                        <e-aggregates>
                        <e-aggregate>
                            <e-columns>
                                <e-column field="qty" type="sum">
                                    <ng-template #footerTemplate let-data>Total: {{data.sum}}</ng-template>
                                </e-column>
                            </e-columns>
                        </e-aggregate>
                    </e-aggregates>
                    </e-columns>
                </ejs-grid>

[Manivel Sellamuthu]

Hi Akshatha, 

Greetings from Syncfusion support. 

From your query, we can understand that you want to update the aggregated while editing the textbox value  in the grid rows. You can achieve your requirement by passing the updated row data to refresh method of the aggregates. Please refer the below code example and sample for more information. 

<div class="control-section"> 

    <ejs-grid #grid [dataSource]='data' id="grid" allowPaging='true' (actionComplete)="actionComplete($event)" [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

        <e-columns> 

. . . 

            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 

            . . . 

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

</div> 

export class AppComponent { 

    public data: Object[]; 

    public editSettings: Object; 

    public toolbar: string[]; 

    public orderidrules: Object; 

    public customeridrules: Object; 

    @ViewChild('grid', {static: true}) 

    public grid: GridComponent; 

 

    public ngOnInit(): void { 

. . . 

    } 

 

    actionComplete (args) { 

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

// here we are binding the onChange event for the textbox 

        var inputEle = args.form.querySelector('#grid'+'Freight'); 

        inputEle.onchange = this.updateAggregates.bind(this);​ 

      } 

    } 

 

    updateAggregates (args) { 

      var form = parentsUntil(args.target, 'e-gridform'); 

      var data = this.grid.editModule.getCurrentEditedData(form, {}); 

//  here we are refreshing the aggregates with updated data 

      this.grid.aggregateModule.refresh(data); 

    } 

} 

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

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

Please let us know, if you need further assistance. 

Regards, 

Manivel