Aggregate Columns columns you add by JavaScript

[diego]

Good afternoon I have the following query:

It is possible to dynamically load columns added to a Grid, I am reusing the same grid to add the added columns, but I cannot get them to show me, the columns of the grid however work without any problems. I attach my code to see if it is correct

  function created(args) {

            let grid = document.getElementById("Grid").ej2_instances[0];

            grid.aggregates = new Array();

            grid.columns = new Array();

            let colums = JSON.parse(@cols);

             let colsAggregated = JSON.parse(@columsAgregate); 

 

             colums.forEach(function (col, index) {

                 grid.columns.push(col);

             });

            colsAggregated.forEach(function (col, index) {

                

                grid.aggregates.columns = new Array();

                grid.aggregates.columns.push(col);

               

            });

NetCore:

   <ejs-grid id="Grid"

                                 

                        

                                  allowPaging="true"

                                  allowSorting="true"

                                  allowResizing="true"

                                  allowGrouping="true"

                                  enablePersistence="true"

                                  showColumnMenu="true"

                                  allowFiltering="true"

                                  enableHover="true"

                                  created="created"

                                  actionFailure="actionFailure"

                                  actionComplete="actionComplete">

                            <e-grid-groupSettings enableLazyLoading="true"></e-grid-groupSettings>

                            <e-grid-pagesettings pageCount="10" pageSize="25"></e-grid-pagesettings>

                            <e-grid-filterSettings type="Excel"></e-grid-filterSettings>

                            <e-grid-selectionsettings checkboxMode="ResetOnRowClick" type="Single"></e-grid-selectionsettings>

                        </ejs-grid>

           

            

             // Monta los filtros correspondientes al listado seleccionado

        }

[diego]

Hello? Any updates??

[Shalini Maragathavel]

Hi Diego, 

Sorry for the delay in providing the response. 

Based on your query we suspect that you need add the aggregate columns and columns dynamically to the Grid. You can achieve your requirement of adding aggregate column and columns using load event of Grid as demonstrated in the below code snippet, 

 

 

<button onclick="myFunction()">RemoveAggregate</button> 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" load="load"   allowPaging="true"> 

    <e-grid-columns>  

. . .        

    </e-grid-columns> 

 

</ejs-grid> 

<script> 

    function myFunction() { 

        

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        grid.aggregates = []; 

 

        grid.columns.pop(); 

        grid.refreshColumns(); 

    } 

    function load(args) { 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        grid.aggregates = [{ 

            columns: [{ 

                type: 'Sum', 

                field: 'Freight', 

                format: 'C2', 

                footerTemplate: 'Sum: ${Sum}' 

            }] 

        }] 

        

        var obj = { field: "EmployeeID", headerText: "EmployeeID", width: 120 }; 

 

        grid.columns.push(obj); 

       

 

    } 

</script> 

 

In the above sample we removed the aggregate column using an external button click. 

Please refer the below sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/filter_core-1286533050.zip

Please get back to us, if you need further assistance. 

Regards, 

Shalini M.