Search results

Reactive Aggregate in Vue Grid component

08 Dec 2022 / 3 minutes to read

Auto update aggregate value in batch editing

When using batch editing, the aggregate values will be refreshed on every cell save. The footer, group footer, and group caption aggregate values will be refreshed.

Adding a new record to the grouped grid will not refresh the aggregate values.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
    <div id="app">
        <ejs-grid :dataSource='data' height='290px' allowPaging='true' allowGrouping='true' :groupSettings='groupOptions' :toolbar='toolbarOptions' :editSettings='editSettings'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true' textAlign='right' width=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='OrderDate' headerText='Order Date' format='yMd' width=120 type='date'></e-column>
                <e-column field='Freight' format='C2' editType= 'numericedit' width=150 ></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
            </e-columns>
            <e-aggregates>
             <e-aggregate>
                    <e-columns>
                        <e-column type="Sum" field="Freight" format="C2" :footerTemplate ='footerSum'></e-column>
                    </e-columns>
                </e-aggregate>
                <e-aggregate>
                    <e-columns>
                        <e-column type="Sum" field="Freight" format="C2" :groupFooterTemplate ='groupFooterSum'></e-column>
                    </e-columns>
                </e-aggregate>
                <e-aggregate>
                    <e-columns>
                        <e-column type="Average" field="Freight" format="C2" :groupCaptionTemplate ='footerAvg'></e-column>
                    </e-columns>
                </e-aggregate>
          </e-aggregates>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Group, Aggregate, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      groupOptions: {showDropArea: false, columns: ['ShipCountry'] },
      toolbarOptions : ['Delete', 'Update', 'Cancel'],
      editSettings : { allowEditing: true, allowDeleting: true, mode: 'Batch' },
      footerSum: function () {
        return  { template : Vue.component('sumTemplate', {
            template: `<span>Sum: {{data.Sum}}</span>`,
            data () {return { data: {}};}
            })
          }
      },
      groupFooterSum: function () {
        return  { template : Vue.component('sumTemplate', {
            template: `<span>Sum: {{data.Sum}}</span>`,
            data () {return { data: {}};}
            })
          }
      },
      footerAvg: function () {
        return  { template : Vue.component('maxTemplate', {
            template: `<span>Average: {{data.Average}}</span>`,
            data () {return { data: {}};}
            })
          }
      }
    };
  },
  provide : {
      grid: [Page, Group, Aggregate, Edit, Toolbar]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>


{% endraw %}
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.data = [
        {
           "OrderID":10248,
           "CustomerID":"VINET",
           "OrderDate":"1996-07-04T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":32.38,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10249,
           "CustomerID":"TOMSP",
           "OrderDate":"1996-07-05T00:00:00.000Z",
           "ShippedDate":"1996-07-10T00:00:00.000Z",
           "Freight":11.61,
           "ShipName":"Toms Spezialitäten",
           "ShipAddress":"Luisenstr. 48",
           "ShipCity":"Münster",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10250,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-12T00:00:00.000Z",
           "Freight":65.83,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10251,
           "CustomerID":"VICTE",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":41.34,
           "ShipName":"Victuailles en stock",
           "ShipAddress":"2, rue du Commerce",
           "ShipCity":"Lyon",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10252,
           "CustomerID":"SUPRD",
           "OrderDate":"1996-07-09T00:00:00.000Z",
           "ShippedDate":"1996-07-11T00:00:00.000Z",
           "Freight":51.3,
           "ShipName":"Suprêmes délices",
           "ShipAddress":"Boulevard Tirou, 255",
           "ShipCity":"Charleroi",
           "ShipRegion":null,
           "ShipCountry":"Belgium"
        },
        {
           "OrderID":10253,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-10T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":58.17,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10254,
           "CustomerID":"CHOPS",
           "OrderDate":"1996-07-11T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":22.98,
           "ShipName":"Chop-suey Chinese",
           "ShipAddress":"Hauptstr. 31",
           "ShipCity":"Bern",
           "ShipRegion":null,
           "ShipCountry":"Switzerland",
           "Verified": true
        },
        {
           "OrderID":10255,
           "CustomerID":"RICSU",
           "OrderDate":"1996-07-12T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":148.33,
           "ShipName":"Richter Supermarkt",
           "ShipAddress":"Starenweg 5",
           "ShipCity":"Genève",
           "ShipRegion":null,
           "ShipCountry":"Switzerland"
        },
        {
           "OrderID":10256,
           "CustomerID":"WELLI",
           "OrderDate":"1996-07-15T00:00:00.000Z",
           "ShippedDate":"1996-07-17T00:00:00.000Z",
           "Freight":13.97,
           "ShipName":"Wellington Importadora",
           "ShipAddress":"Rua do Mercado, 12",
           "ShipCity":"Resende",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10257,
           "CustomerID":"HILAA",
           "OrderDate":"1996-07-16T00:00:00.000Z",
           "ShippedDate":"1996-07-22T00:00:00.000Z",
           "Freight":81.91,
           "ShipName":"HILARION-Abastos",
           "ShipAddress":"Carrera 22 con Ave. Carlos Soublette #8-35",
           "ShipCity":"San Cristóbal",
           "ShipRegion":"Táchira",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10258,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-17T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":140.51,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10259,
           "CustomerID":"CENTC",
           "OrderDate":"1996-07-18T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":3.25,
           "ShipName":"Centro comercial Moctezuma",
           "ShipAddress":"Sierras de Granada 9993",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico",
           "Verified": true
        },
        {
           "OrderID":10260,
           "CustomerID":"OTTIK",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-29T00:00:00.000Z",
           "Freight":55.09,
           "ShipName":"Ottilies Käseladen",
           "ShipAddress":"Mehrheimerstr. 369",
           "ShipCity":"Köln",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10261,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-30T00:00:00.000Z",
           "Freight":3.05,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10262,
           "CustomerID":"RATTC",
           "OrderDate":"1996-07-22T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":48.29,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA",
           "Verified": true
        },
        {
           "OrderID":10263,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-23T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":146.06,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "Verified": true,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10264,
           "CustomerID":"FOLKO",
           "OrderDate":"1996-07-24T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":3.67,
           "ShipName":"Folk och fä HB",
           "ShipAddress":"Åkergatan 24",
           "ShipCity":"Bräcke",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10265,
           "CustomerID":"BLONP",
           "OrderDate":"1996-07-25T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":55.28,
           "ShipName":"Blondel père et fils",
           "ShipAddress":"24, place Kléber",
           "ShipCity":"Strasbourg",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10266,
           "CustomerID":"WARTH",
           "OrderDate":"1996-07-26T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":25.73,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10267,
           "CustomerID":"FRANK",
           "OrderDate":"1996-07-29T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":208.58,
           "ShipName":"Frankenversand",
           "ShipAddress":"Berliner Platz 43",
           "ShipCity":"München",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10268,
           "CustomerID":"GROSR",
           "OrderDate":"1996-07-30T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":66.29,
           "ShipName":"GROSELLA-Restaurante",
           "ShipAddress":"5ª Ave. Los Palos Grandes",
           "ShipCity":"Caracas",
           "ShipRegion":"DF",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10269,
           "CustomerID":"WHITC",
           "OrderDate":"1996-07-31T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":4.56,
           "ShipName":"White Clover Markets",
           "ShipAddress":"1029 - 12th Ave. S.",
           "ShipCity":"Seattle",
           "ShipRegion":"WA",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10270,
           "CustomerID":"WARTH",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":136.54,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10271,
           "CustomerID":"SPLIR",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":4.54,
           "ShipName":"Split Rail Beer & Ale",
           "ShipAddress":"P.O. Box 555",
           "ShipCity":"Lander",
           "ShipRegion":"WY",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10272,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-02T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":98.03,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10273,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-05T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":76.07,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10274,
           "CustomerID":"VINET",
           "OrderDate":"1996-08-06T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":6.01,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10275,
           "CustomerID":"MAGAA",
           "OrderDate":"1996-08-07T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":26.93,
           "ShipName":"Magazzini Alimentari Riuniti",
           "ShipAddress":"Via Ludovico il Moro 22",
           "ShipCity":"Bergamo",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10276,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-08T00:00:00.000Z",
           "ShippedDate":"1996-08-14T00:00:00.000Z",
           "Freight":13.84,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10277,
           "CustomerID":"MORGK",
           "OrderDate":"1996-08-09T00:00:00.000Z",
           "ShippedDate":"1996-08-13T00:00:00.000Z",
           "Freight":125.77,
           "ShipName":"Morgenstern Gesundkost",
           "ShipAddress":"Heerstr. 22",
           "ShipCity":"Leipzig",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10278,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-12T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":92.69,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10279,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-13T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":25.83,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10280,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-09-12T00:00:00.000Z",
           "Freight":8.98,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden",
           "Verified": true
        },
        {
           "OrderID":10281,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":2.94,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10282,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-15T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":12.69,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10283,
           "CustomerID":"LILAS",
           "OrderDate":"1996-08-16T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":84.81,
           "ShipName":"LILA-Supermercado",
           "ShipAddress":"Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
           "ShipCity":"Barquisimeto",
           "ShipRegion":"Lara",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10284,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-19T00:00:00.000Z",
           "ShippedDate":"1996-08-27T00:00:00.000Z",
           "Freight":76.56,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10285,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-20T00:00:00.000Z",
           "ShippedDate":"1996-08-26T00:00:00.000Z",
           "Freight":76.83,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10286,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-21T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":229.24,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10287,
           "CustomerID":"RICAR",
           "OrderDate":"1996-08-22T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":12.76,
           "ShipName":"Ricardo Adocicados",
           "ShipAddress":"Av. Copacabana, 267",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10288,
           "CustomerID":"REGGC",
           "OrderDate":"1996-08-23T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":7.45,
           "ShipName":"Reggiani Caseifici",
           "ShipAddress":"Strada Provinciale 124",
           "ShipCity":"Reggio Emilia",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10289,
           "CustomerID":"BSBEV",
           "OrderDate":"1996-08-26T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":22.77,
           "ShipName":"B's Beverages",
           "ShipAddress":"Fauntleroy Circus",
           "ShipCity":"London",
           "ShipRegion":null,
           "ShipCountry":"UK"
        },
        {
           "OrderID":10290,
           "CustomerID":"COMMI",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":79.7,
           "ShipName":"Comércio Mineiro",
           "ShipAddress":"Av. dos Lusíadas, 23",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10291,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-04T00:00:00.000Z",
           "Freight":6.4,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10292,
           "CustomerID":"TRADH",
           "OrderDate":"1996-08-28T00:00:00.000Z",
           "ShippedDate":"1996-09-02T00:00:00.000Z",
           "Freight":1.35,
           "ShipName":"Tradiçao Hipermercados",
           "ShipAddress":"Av. Inês de Castro, 414",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10293,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-29T00:00:00.000Z",
           "ShippedDate":"1996-09-11T00:00:00.000Z",
           "Freight":21.18,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10294,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-30T00:00:00.000Z",
           "ShippedDate":"1996-09-05T00:00:00.000Z",
           "Freight":147.26,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        }];
});

Refresh aggregate values in inline editing

By default, reactive aggregate update is not supported by inline and dialog edit modes as it is not feasible to anticipate the value change event for every editor. But, you can refresh the aggregates manually in the inline edit mode using the refresh method of aggregate module.

In the following code, the input event for the Freight column editor has been registered and the aggregate value has been refreshed manually.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
    <div id="app">
        <ejs-grid ref='grid' :dataSource='data' height='290px' allowPaging='true' :toolbar='toolbarOptions' :editSettings='editSettings' :actionBegin='actionBegin'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true' textAlign='right' width=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='Freight' format='C2' editType= 'numericedit' :edit='numericParams' width=150 ></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
            </e-columns>
            <e-aggregates>
             <e-aggregate>
                    <e-columns>
                        <e-column type="Sum" field="Freight" format="C2" :footerTemplate ='footerSum'></e-column>
                    </e-columns>
                </e-aggregate>
          </e-aggregates>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Aggregate, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';

Vue.use(GridPlugin);
let selectedRecord = {};
export default {
  data() {
    return {
      data: data,
      numericParams: { params: { change: this.changeFn } },
      toolbarOptions : ['Delete', 'Update', 'Cancel'],
      editSettings : { allowEditing: true, allowDeleting: true, mode: 'Inline' },
      footerSum: function () {
        return  { template : Vue.component('sumTemplate', {
            template: `<span>Sum: {{data.Sum}}</span>`,
            data () {return { data: {}};}
            })
          }
      },
    };
  },
   methods: {
      actionBegin: function(args){
          if(args.requestType === 'beginEdit'){
           selectedRecord = {};
           selectedRecord = args.rowData;
        };
      },
    changeFn: function(args){
        selectedRecord['Freight'] = args.value;
        let gridObj = this.$refs.grid.ej2Instances;
        gridObj.aggregateModule.refresh(selectedRecord);
    }
  },
  provide : {
      grid: [Page, Aggregate, Edit, Toolbar]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>


{% endraw %}
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.data = [
        {
           "OrderID":10248,
           "CustomerID":"VINET",
           "OrderDate":"1996-07-04T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":32.38,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10249,
           "CustomerID":"TOMSP",
           "OrderDate":"1996-07-05T00:00:00.000Z",
           "ShippedDate":"1996-07-10T00:00:00.000Z",
           "Freight":11.61,
           "ShipName":"Toms Spezialitäten",
           "ShipAddress":"Luisenstr. 48",
           "ShipCity":"Münster",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10250,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-12T00:00:00.000Z",
           "Freight":65.83,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10251,
           "CustomerID":"VICTE",
           "OrderDate":"1996-07-08T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":41.34,
           "ShipName":"Victuailles en stock",
           "ShipAddress":"2, rue du Commerce",
           "ShipCity":"Lyon",
           "ShipRegion":null,
           "ShipCountry":"France",
           "Verified": true
        },
        {
           "OrderID":10252,
           "CustomerID":"SUPRD",
           "OrderDate":"1996-07-09T00:00:00.000Z",
           "ShippedDate":"1996-07-11T00:00:00.000Z",
           "Freight":51.3,
           "ShipName":"Suprêmes délices",
           "ShipAddress":"Boulevard Tirou, 255",
           "ShipCity":"Charleroi",
           "ShipRegion":null,
           "ShipCountry":"Belgium"
        },
        {
           "OrderID":10253,
           "CustomerID":"HANAR",
           "OrderDate":"1996-07-10T00:00:00.000Z",
           "ShippedDate":"1996-07-16T00:00:00.000Z",
           "Freight":58.17,
           "ShipName":"Hanari Carnes",
           "ShipAddress":"Rua do Paço, 67",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil",
           "Verified": true
        },
        {
           "OrderID":10254,
           "CustomerID":"CHOPS",
           "OrderDate":"1996-07-11T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":22.98,
           "ShipName":"Chop-suey Chinese",
           "ShipAddress":"Hauptstr. 31",
           "ShipCity":"Bern",
           "ShipRegion":null,
           "ShipCountry":"Switzerland",
           "Verified": true
        },
        {
           "OrderID":10255,
           "CustomerID":"RICSU",
           "OrderDate":"1996-07-12T00:00:00.000Z",
           "ShippedDate":"1996-07-15T00:00:00.000Z",
           "Freight":148.33,
           "ShipName":"Richter Supermarkt",
           "ShipAddress":"Starenweg 5",
           "ShipCity":"Genève",
           "ShipRegion":null,
           "ShipCountry":"Switzerland"
        },
        {
           "OrderID":10256,
           "CustomerID":"WELLI",
           "OrderDate":"1996-07-15T00:00:00.000Z",
           "ShippedDate":"1996-07-17T00:00:00.000Z",
           "Freight":13.97,
           "ShipName":"Wellington Importadora",
           "ShipAddress":"Rua do Mercado, 12",
           "ShipCity":"Resende",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10257,
           "CustomerID":"HILAA",
           "OrderDate":"1996-07-16T00:00:00.000Z",
           "ShippedDate":"1996-07-22T00:00:00.000Z",
           "Freight":81.91,
           "ShipName":"HILARION-Abastos",
           "ShipAddress":"Carrera 22 con Ave. Carlos Soublette #8-35",
           "ShipCity":"San Cristóbal",
           "ShipRegion":"Táchira",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10258,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-17T00:00:00.000Z",
           "ShippedDate":"1996-07-23T00:00:00.000Z",
           "Freight":140.51,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10259,
           "CustomerID":"CENTC",
           "OrderDate":"1996-07-18T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":3.25,
           "ShipName":"Centro comercial Moctezuma",
           "ShipAddress":"Sierras de Granada 9993",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico",
           "Verified": true
        },
        {
           "OrderID":10260,
           "CustomerID":"OTTIK",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-29T00:00:00.000Z",
           "Freight":55.09,
           "ShipName":"Ottilies Käseladen",
           "ShipAddress":"Mehrheimerstr. 369",
           "ShipCity":"Köln",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10261,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-07-19T00:00:00.000Z",
           "ShippedDate":"1996-07-30T00:00:00.000Z",
           "Freight":3.05,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10262,
           "CustomerID":"RATTC",
           "OrderDate":"1996-07-22T00:00:00.000Z",
           "ShippedDate":"1996-07-25T00:00:00.000Z",
           "Freight":48.29,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA",
           "Verified": true
        },
        {
           "OrderID":10263,
           "CustomerID":"ERNSH",
           "OrderDate":"1996-07-23T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":146.06,
           "ShipName":"Ernst Handel",
           "ShipAddress":"Kirchgasse 6",
           "ShipCity":"Graz",
           "ShipRegion":null,
           "Verified": true,
           "ShipCountry":"Austria"
        },
        {
           "OrderID":10264,
           "CustomerID":"FOLKO",
           "OrderDate":"1996-07-24T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":3.67,
           "ShipName":"Folk och fä HB",
           "ShipAddress":"Åkergatan 24",
           "ShipCity":"Bräcke",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10265,
           "CustomerID":"BLONP",
           "OrderDate":"1996-07-25T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":55.28,
           "ShipName":"Blondel père et fils",
           "ShipAddress":"24, place Kléber",
           "ShipCity":"Strasbourg",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10266,
           "CustomerID":"WARTH",
           "OrderDate":"1996-07-26T00:00:00.000Z",
           "ShippedDate":"1996-07-31T00:00:00.000Z",
           "Freight":25.73,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10267,
           "CustomerID":"FRANK",
           "OrderDate":"1996-07-29T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":208.58,
           "ShipName":"Frankenversand",
           "ShipAddress":"Berliner Platz 43",
           "ShipCity":"München",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10268,
           "CustomerID":"GROSR",
           "OrderDate":"1996-07-30T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":66.29,
           "ShipName":"GROSELLA-Restaurante",
           "ShipAddress":"5ª Ave. Los Palos Grandes",
           "ShipCity":"Caracas",
           "ShipRegion":"DF",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10269,
           "CustomerID":"WHITC",
           "OrderDate":"1996-07-31T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":4.56,
           "ShipName":"White Clover Markets",
           "ShipAddress":"1029 - 12th Ave. S.",
           "ShipCity":"Seattle",
           "ShipRegion":"WA",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10270,
           "CustomerID":"WARTH",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-02T00:00:00.000Z",
           "Freight":136.54,
           "ShipName":"Wartian Herkku",
           "ShipAddress":"Torikatu 38",
           "ShipCity":"Oulu",
           "ShipRegion":null,
           "ShipCountry":"Finland"
        },
        {
           "OrderID":10271,
           "CustomerID":"SPLIR",
           "OrderDate":"1996-08-01T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":4.54,
           "ShipName":"Split Rail Beer & Ale",
           "ShipAddress":"P.O. Box 555",
           "ShipCity":"Lander",
           "ShipRegion":"WY",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10272,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-02T00:00:00.000Z",
           "ShippedDate":"1996-08-06T00:00:00.000Z",
           "Freight":98.03,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        },
        {
           "OrderID":10273,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-05T00:00:00.000Z",
           "ShippedDate":"1996-08-12T00:00:00.000Z",
           "Freight":76.07,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10274,
           "CustomerID":"VINET",
           "OrderDate":"1996-08-06T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":6.01,
           "ShipName":"Vins et alcools Chevalier",
           "ShipAddress":"59 rue de l'Abbaye",
           "ShipCity":"Reims",
           "ShipRegion":null,
           "ShipCountry":"France"
        },
        {
           "OrderID":10275,
           "CustomerID":"MAGAA",
           "OrderDate":"1996-08-07T00:00:00.000Z",
           "ShippedDate":"1996-08-09T00:00:00.000Z",
           "Freight":26.93,
           "ShipName":"Magazzini Alimentari Riuniti",
           "ShipAddress":"Via Ludovico il Moro 22",
           "ShipCity":"Bergamo",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10276,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-08T00:00:00.000Z",
           "ShippedDate":"1996-08-14T00:00:00.000Z",
           "Freight":13.84,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10277,
           "CustomerID":"MORGK",
           "OrderDate":"1996-08-09T00:00:00.000Z",
           "ShippedDate":"1996-08-13T00:00:00.000Z",
           "Freight":125.77,
           "ShipName":"Morgenstern Gesundkost",
           "ShipAddress":"Heerstr. 22",
           "ShipCity":"Leipzig",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10278,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-12T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":92.69,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden"
        },
        {
           "OrderID":10279,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-13T00:00:00.000Z",
           "ShippedDate":"1996-08-16T00:00:00.000Z",
           "Freight":25.83,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10280,
           "CustomerID":"BERGS",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-09-12T00:00:00.000Z",
           "Freight":8.98,
           "ShipName":"Berglunds snabbköp",
           "ShipAddress":"Berguvsvägen  8",
           "ShipCity":"Luleå",
           "ShipRegion":null,
           "ShipCountry":"Sweden",
           "Verified": true
        },
        {
           "OrderID":10281,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-14T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":2.94,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10282,
           "CustomerID":"ROMEY",
           "OrderDate":"1996-08-15T00:00:00.000Z",
           "ShippedDate":"1996-08-21T00:00:00.000Z",
           "Freight":12.69,
           "ShipName":"Romero y tomillo",
           "ShipAddress":"Gran Vía, 1",
           "ShipCity":"Madrid",
           "ShipRegion":null,
           "ShipCountry":"Spain"
        },
        {
           "OrderID":10283,
           "CustomerID":"LILAS",
           "OrderDate":"1996-08-16T00:00:00.000Z",
           "ShippedDate":"1996-08-23T00:00:00.000Z",
           "Freight":84.81,
           "ShipName":"LILA-Supermercado",
           "ShipAddress":"Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
           "ShipCity":"Barquisimeto",
           "ShipRegion":"Lara",
           "ShipCountry":"Venezuela"
        },
        {
           "OrderID":10284,
           "CustomerID":"LEHMS",
           "OrderDate":"1996-08-19T00:00:00.000Z",
           "ShippedDate":"1996-08-27T00:00:00.000Z",
           "Freight":76.56,
           "ShipName":"Lehmanns Marktstand",
           "ShipAddress":"Magazinweg 7",
           "ShipCity":"Frankfurt a.M.",
           "ShipRegion":null,
           "ShipCountry":"Germany",
           "Verified": true
        },
        {
           "OrderID":10285,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-20T00:00:00.000Z",
           "ShippedDate":"1996-08-26T00:00:00.000Z",
           "Freight":76.83,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10286,
           "CustomerID":"QUICK",
           "OrderDate":"1996-08-21T00:00:00.000Z",
           "ShippedDate":"1996-08-30T00:00:00.000Z",
           "Freight":229.24,
           "ShipName":"QUICK-Stop",
           "ShipAddress":"Taucherstraße 10",
           "ShipCity":"Cunewalde",
           "ShipRegion":null,
           "ShipCountry":"Germany"
        },
        {
           "OrderID":10287,
           "CustomerID":"RICAR",
           "OrderDate":"1996-08-22T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":12.76,
           "ShipName":"Ricardo Adocicados",
           "ShipAddress":"Av. Copacabana, 267",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10288,
           "CustomerID":"REGGC",
           "OrderDate":"1996-08-23T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":7.45,
           "ShipName":"Reggiani Caseifici",
           "ShipAddress":"Strada Provinciale 124",
           "ShipCity":"Reggio Emilia",
           "ShipRegion":null,
           "ShipCountry":"Italy"
        },
        {
           "OrderID":10289,
           "CustomerID":"BSBEV",
           "OrderDate":"1996-08-26T00:00:00.000Z",
           "ShippedDate":"1996-08-28T00:00:00.000Z",
           "Freight":22.77,
           "ShipName":"B's Beverages",
           "ShipAddress":"Fauntleroy Circus",
           "ShipCity":"London",
           "ShipRegion":null,
           "ShipCountry":"UK"
        },
        {
           "OrderID":10290,
           "CustomerID":"COMMI",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-03T00:00:00.000Z",
           "Freight":79.7,
           "ShipName":"Comércio Mineiro",
           "ShipAddress":"Av. dos Lusíadas, 23",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10291,
           "CustomerID":"QUEDE",
           "OrderDate":"1996-08-27T00:00:00.000Z",
           "ShippedDate":"1996-09-04T00:00:00.000Z",
           "Freight":6.4,
           "ShipName":"Que Delícia",
           "ShipAddress":"Rua da Panificadora, 12",
           "ShipCity":"Rio de Janeiro",
           "ShipRegion":"RJ",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10292,
           "CustomerID":"TRADH",
           "OrderDate":"1996-08-28T00:00:00.000Z",
           "ShippedDate":"1996-09-02T00:00:00.000Z",
           "Freight":1.35,
           "ShipName":"Tradiçao Hipermercados",
           "ShipAddress":"Av. Inês de Castro, 414",
           "ShipCity":"Sao Paulo",
           "ShipRegion":"SP",
           "ShipCountry":"Brazil"
        },
        {
           "OrderID":10293,
           "CustomerID":"TORTU",
           "OrderDate":"1996-08-29T00:00:00.000Z",
           "ShippedDate":"1996-09-11T00:00:00.000Z",
           "Freight":21.18,
           "ShipName":"Tortuga Restaurante",
           "ShipAddress":"Avda. Azteca 123",
           "ShipCity":"México D.F.",
           "ShipRegion":null,
           "ShipCountry":"Mexico"
        },
        {
           "OrderID":10294,
           "CustomerID":"RATTC",
           "OrderDate":"1996-08-30T00:00:00.000Z",
           "ShippedDate":"1996-09-05T00:00:00.000Z",
           "Freight":147.26,
           "ShipName":"Rattlesnake Canyon Grocery",
           "ShipAddress":"2817 Milton Dr.",
           "ShipCity":"Albuquerque",
           "ShipRegion":"NM",
           "ShipCountry":"USA"
        }];
});