How to add the aggregate option functionalities in the column menu's feature

<div class="content-wrapper">

    <div id="target">

        <div id="Grid"></div>

        <div id="dlgContent" style="visibility: hidden" class="dialogContent">

            <div id="dlgContent1"></div>

            <div id="dlgContent2"></div>

        </div>

        <div id="dialog"></div>

    </div>

</div>

var grid = new ej.grids.Grid({

            dataSource: window.orderDatas,

            allowSorting: true,

            allowFiltering: true,

            filterSettings: { type: 'Excel' },

            allowPaging: true,

            columnMenuItems: [

                'AutoFitAll',

                'AutoFit',

                'SortAscending',

                'SortDescending',

                'Filter',

                { text: 'Aggregate', id: 'gridAggregate' },

                'ColumnChooser'

            ],

            columnMenuOpen: function (args) { //Grid’s columnMenuOpen event

                if (args.element.id && args.element.id == 'Grid_columnmenu') {

                    args.element.addEventListener('mouseover', function (e) {

                        if (e.target.id == 'gridAggregate') { //Column menu Aggregate item element

                            var dy = e.target.offsetParent.offsetTop;

                            var dx = e.target.offsetParent.offsetWidth + e.target.offsetParent.offsetLeft;

                            (dialogObj.position = { X: dx, Y: dy }), dialogObj.show(); //Sshow the dialog component with the appropriate position while on mouse hovering.

                        } else {

                            dialogObj.hide();

                        }

                    });

                    grid.element.addEventListener('mouseover', function (e) {

                        dialogObj.hide();

                    });

                }

            },

            showColumnMenu: true,

            columns: [.....]

        });

        grid.appendTo('#Grid');

      
       // Grid's Aggregate Type list

        var listData1 = [

            { text: 'Sum of', id: 'Sum' },

            { text: 'Average of', id: 'Average' }

        ];

        // Initialize the ListView component for Aggregate Type list.

        var listObj1 = new ej.lists.ListView({

            //Set the defined data to the data source property.

            dataSource: listData1,

            headerTitle: 'Types',

            showHeader: true,

            //Set true to enable CheckBox.

            showCheckBox: true

        });

 

        //Render the initialized ListView component.

        listObj1.appendTo('#dlgContent1');

 

        //Grid's numeric column list.

        var listObj2 = new ej.lists.ListView({

            dataSource: [],

            headerTitle: 'Columns',

            showHeader: true,

            showCheckBox: true

        });

 

        //Render the initialized ListView component for numeric column list.

        listObj2.appendTo('#dlgContent2');

 

        //Dialog component

        var dialogObj = new ej.popups.Dialog({

            header: 'Aggregate',

            content: document.getElementById('dlgContent'),

            buttons: [

                { buttonModel: { isPrimary: true, content: 'Ok' }, click: btnClick1 }

            ],

            target: document.body,

            height: 'auto',

            width: '200px',

            visible: false,

            closeOnEscape: true,

            beforeOpen: onBeforeopen

        });

        dialogObj.appendTo('#dialog');

 

        var flag = true;

        function onBeforeopen() { //Ddialog's onBeforeopen event

            if (flag) {

                var listObj2Data = [];

                grid.columns.forEach(columns);

                function columns(items) {

                    if (items.type == 'number') {

                        var lData = { text: '', id: '' };

                        lData.text = items.headerText;

                        lData.id = items.field;

                        listObj2Data.push(lData);

                    }

                }

                listObj2.dataSource = listObj2Data; // Bbind the Grid's numeric columns list.

                flag = false;

            }

            document.getElementById('dlgContent').style.visibility = 'visible';

        }

        function btnClick1() { //dDialog's ok button click function

            //Hhere, we perreform the Grid's aggregate action manually with the selected type and column in the list.

            var aType = listObj1.getSelectedItems().data;

            var aColumn = listObj2.getSelectedItems().data;

            var aggregate = [];

            for (var j = 0; j < aType.length; j++) {

                var firstLevelObj = { columns: [] };

 

                for (var i = 0; i < aColumn.length; i++) {

                    var secondLevelObj = {

                        type: '',

                        field: '',

                        footerTemplate: 'Sum: ${Sum}'

                    };

                    secondLevelObj.field = aColumn[i].id;

                    secondLevelObj.type = aType[j].id;

                    secondLevelObj.footerTemplate = aType[j].id + ': ${' + aType[j].id + '}';

                    firstLevelObj.columns.push(secondLevelObj);

                }

                aggregate.push(firstLevelObj);

            }

            grid.aggregates = aggregate;

            dialogObj.hide();

        }