Show Aggregate value in header or outside the grid like a label

[Mohammed Ansar Vaseem]

I want to show Aggregate value in header or outside the grid like a label or textbox. I can show in footer like this

...

<e-aggregate-columns>

                        <e-aggregate-column field="Debit" type="Sum" format="C2" footerTemplate="Sum:${Sum}">

                        </e-aggregate-column>

...

And also i see in footer value like this Sum:$58,366.12. I don't want the word Sum there.

Please help
thank you

[Pavithra Subramaniyam]

Hi Mohammed, 

 

Thanks for contacting Syncfusion support. 

 

You can achieve your requirement by getting the aggregate value from the Grid aggregateModule and add this value in the Grid header or any other element inside the “dataBound” event. Please refer to the below code example and documentation link for more information. 

 

function dataBound(e) { 

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

  var field = 'Freight'; 

  // here we have added the sum value for the Freight column in its header 

  grid.getColumnHeaderByField(field).querySelector('.e-headertext').innerText = 

    field + ' ' + grid.aggregateModule.footerRenderer.aggregates.aggregates[ 

    field + ' - sum']; 

} 

 

 

Also, you can remove the “Sum” text in the footer by just removing it from the “footerTemplate” as below 

 

 <e-aggregate-column field="Debit" type="Sum" format="C2" footerTemplate="${Sum}"></e-aggregate-column> 

 

 

API: https://ej2.syncfusion.com/javascript/documentation/api/grid/#databound 

        https://ej2.syncfusion.com/javascript/documentation/api/grid/#getcolumnbyfield 

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S 

[Mohammed Ansar Vaseem]

thank you it worked!! but when i update the row or delete it the total sum is not getting updated.

I followed your documentation link to use the event ' dataSourceChanged' but its not working.

It says 'Invoke the done method from the argument to start render after edit operation.' but i don't get it, sorry! i m not that good in js.

Can you please help in this as well

Thank you!

[Pavithra Subramaniyam]

Hi Mohammed, 

By default, after adding and deleting the dataBound event will per triggered where we have set the header with summary value. For further validation, please share the below details that will be helpful for us to provide a better solution as early as possible. 

1. Share the full Grid code
2. Type of editing (normal, dialog, batch) you are using
3. Type of dataSource you are using (local, remote, custom binding)

Regards, 

Pavithra S 

[Mohammed Ansar Vaseem]

Thank you Pavithra for replying again

here is the full code for grid.

Also please let me know a way to clear all filtering on the columns at once. 

@{

        List<object> toolbarItems = new List<object>();

        toolbarItems.Add("Edit");

        toolbarItems.Add("Delete");

        toolbarItems.Add("Update");

        toolbarItems.Add("Cancel");

        //toolbarItems.Add(new { text = "Clear Filter", tooltipText = "Clear Filter", id = "Click", align = "Right" });

    }

    <div class="col-sm-12">

        <ejs-grid id="Grid" dataBound="dataBound" allowPaging="true" allowFiltering="true" toolbar=toolbarItems>

            <e-grid-aggregates>

                <e-grid-aggregate>

                    <e-aggregate-columns>

                        <e-aggregate-column field="Debit" type="Sum" format="C2" footerTemplate="${Sum}">

                        </e-aggregate-column>

                        <e-aggregate-column field="Credit" type="Sum" format="C2" footerTemplate="${Sum}">

                        </e-aggregate-column>

                    </e-aggregate-columns>

                </e-grid-aggregate>

            </e-grid-aggregates>

            <e-grid-filtersettings type="Menu"></e-grid-filtersettings>

            <e-data-manager json="@Model.ToArray()" updateUrl="/Accountant/Update" removeUrl="/Accountant/Delete"

                            adaptor="RemoteSaveAdaptor"></e-data-manager>

            <e-grid-editsettings allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editsettings>

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

            <e-grid-columns>

                <e-grid-column field="Id" headerText="Id" isPrimaryKey="true" width="0"></e-grid-column>

                <e-grid-column field="Date" headerText="Date" editType="datepickeredit" format="yMd"></e-grid-column>

                <e-grid-column field="Transaction" headerText="Transaction" width="240"></e-grid-column>

                <e-grid-column field="Description" headerText="Description" width="320"></e-grid-column>

                <e-grid-column field="Category" headerText="Category"></e-grid-column>

                <e-grid-column field="Debit" headerText="Debit" editType="numericedit"></e-grid-column>

                <e-grid-column field="Credit" headerText="Credit" editType="numericedit"></e-grid-column>

            </e-grid-columns>

        </ejs-grid>

[Pavithra Subramaniyam]

Hi Mohammed, 

 

Thanks for sharing the details. 

 

By default, while updating a row we need to refresh the summary rows inside the change event of the aggregate column since the reactive aggregate is not supported in Dialog and Inline edit mode. So please refer to the below code example, documentation link for refreshing the summary rows and header cell while updating the grid rows. 

 

<script> 

    function updateHeaader() { 

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

        var field = 'Freight'; 

        // here we have added the sum value for the Freight column in its header 

        grid.getColumnHeaderByField(field).querySelector('.e-headertext').innerText = 

            field + ' ' + grid.aggregateModule.footerRenderer.aggregates.aggregates[ 

            field + ' - sum']; 

    } 

    function dataBound(args) { 

        updateHeaader(); 

    } 

 

    function actionComplete(args) { 

        if (args.requestType === 'save' && args.action == "edit") { 

            // The aggregate module is refreshed with the updated data 

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

            grid.aggregateModule.refresh(args.data); 

            updateHeaader(); 

        } 

    } 

</script> 

 

Documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/aggregates/reactive-aggregate#refresh-aggregate-values-in-inline-editing 

 

And you can clear all columns filtering by using the “clearFiltering” method. 

 

Regards, 

Pavithra S 

 

[Mohammed Ansar Vaseem]

It worked

Thank you Pavithra for diligently answering all my queries. 

[Pavithra Subramaniyam]

Hi Mohammed, 

 

It is great to hear that the provided solution helped you! 

 

Please get back to us if you have any queries. 

 

Regards, 

Pavithra S