[Feature Request] Show Aggregation on first row

[Allen Cook]

Today there is no way to instruct the Blazor version of Syncfusion data grid control to display aggregation at the top of the grid content.

I was able to hack together a javascript function that could be called when the data is bound but the resulting clone does not participate in the re-size feature and I imagine other events that could change how it is displayed.

Please allow us to have a HeaderTemplate to allow us to instruct blazor to generate the header aggregation row.

<SfGrid ID="test" @ref="grid" DataSource="entries" AllowFiltering="true" AllowResizing="true" AllowSorting="true">

                    <GridEvents TValue="Entry" DataBound="@((a) => js.InvokeVoidAsync("CloneFooter","test") )" />

function CloneFooter(id) {

            /** @type {HTMLElement} */

            var table = document.getElementById(id);

            /** @type {HTMLElement} */

            var summaryRow = table.querySelector(".e-gridfooter").cloneNode(true);//get the clone element of grid footer

            summaryRow.style.border = "1px solid #c4c4c4";

            summaryRow.classList.add("e-gridfooterclone");

            table.insertBefore(summaryRow, table.querySelector(".e-gridcontent"));//insert the cloned element before the grid content

        }

[Rahul Narayanasamy]

Hi Allen, 

Greetings from Syncfusion. 

Query: Show Aggregation on first row 

We have validated your query and you want to show aggregation row at the top the Grid content. You have faced problem while resizing the columns with the inserted top aggregation row. We suggest you to insert the original aggregate row instead of clone element to resolve the problem. Find the below code snippets and sample for your reference. 

[Index.razor] 

@using Syncfusion.Blazor.Grids 

@inject IJSRuntime JSRuntime 

 

<SfGrid @ref="Grid" ID="Grid" DataSource="@Orders" AllowResizing="true" AllowPaging="true"> 

    <GridEvents DataBound="DataBoundHandler" TValue="Order"></GridEvents> 

    <GridPageSettings PageSize="8"></GridPageSettings> 

    <GridAggregates> 

        <GridAggregate> 

            <GridAggregateColumns> 

                <GridAggregateColumn Field=@nameof(Order.Freight) Type="AggregateType.Sum" Format="C2"> 

                    <FooterTemplate> 

                        @{ 

                            var aggregate = (context as AggregateTemplateContext); 

                            <div> 

                                <p>Sum: @aggregate.Sum</p> 

                            </div> 

                        } 

                    </FooterTemplate> 

                </GridAggregateColumn> 

            </GridAggregateColumns> 

        </GridAggregate> 

    </GridAggregates> 

    <GridColumns> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfGrid<Order> Grid; 

    . . . 

    public async Task DataBoundHandler() 

    { 

        await JSRuntime.InvokeVoidAsync("Changeposition", Grid.ID);  // called interop function 

    } 

} 

[Interop.js] 

function Changeposition(id) { 

    console.log('hi'); 

    var grid = document.getElementById(id); 

    //var aggregateEle = grid.querySelector(".e-gridfooter").cloneNode(true); 

    var aggregateEle = grid.querySelector(".e-gridfooter");   //get original aggregate element insert before grid content 

    grid.insertBefore(aggregateEle, grid.querySelector(".e-gridcontent")); 

 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/165781/ze/GridAggregate-446684438  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Allen Cook]

Thank you this does allow me to move the totals row but I have some screens where the customer would like the aggregation to be shown on both top and bottom.

I would like to have the aggregation row on both the top an bottom at the same time. I have attempted to add another aggregation to allow me to move one of them but each one relates to a tr in the summary table so they can't simply be moved separately.

Also I ran into an issue where if I have a table within the details of another table the databound event does not seem to trigger.

[Rahul Narayanasamy]

Hi Allen, 

Thanks for the update. 

We have validated your query and you want to render the aggregate row on both bottom and top of the Grid and want to react both the aggregate rows on resizing the columns. Here, we have prepared a sample based on your requirement. We have called an interop function in ResizeStopped event of the Grid and replace the top aggregate row with the cloned element of original aggregate row. Now both the top and bottom aggregate rows are aligned property while performing resize operation. 

Find the below code snippets and sample for your reference. 

 

@using Syncfusion.Blazor.Grids 

@inject IJSRuntime JSRuntime 

 

<SfGrid @ref="Grid" ID="Grid" DataSource="@Orders" AllowResizing="true" AllowPaging="true"> 

    <GridEvents DataBound="DataBoundHandler" ResizeStopped="ResizeStoppedHanlder"  TValue="Order"></GridEvents> 

    <GridPageSettings PageSize="8"></GridPageSettings> 

    <GridAggregates> 

        <GridAggregate> 

            <GridAggregateColumns> 

                <GridAggregateColumn Field=@nameof(Order.Freight) Type="AggregateType.Sum" Format="C2"> 

                    <FooterTemplate> 

                        @{ 

                            var aggregate = (context as AggregateTemplateContext); 

                            <div> 

                                <p>Sum: @aggregate.Sum</p> 

                            </div> 

                        } 

                    </FooterTemplate> 

                </GridAggregateColumn> 

            </GridAggregateColumns> 

        </GridAggregate> 

    </GridAggregates> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        . .  

 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    SfGrid<Order> Grid; 

    . ..  

    public async Task DataBoundHandler() 

    { 

        await JSRuntime.InvokeVoidAsync("Changeposition", Grid.ID);  // called interop function for adding the row initially 

    } 

    public async Task ResizeStoppedHanlder(ResizeArgs args) 

    { 

        await JSRuntime.InvokeVoidAsync("Replace", Grid.ID);  // called interop function 

    } 

} 

[Interop.js] 

function Changeposition(id) { 

    console.log('hi'); 

    var width; 

    var grid = document.getElementById(id); 

    var aggregateElement = document.getElementById(id + "_footer_table").cloneNode(true); 

    grid.insertBefore(aggregateElement, grid.querySelector(".e-gridcontent")); 

 

} 

 

function Replace() { 

    var alltable = document.getElementsByClassName('e-table'); 

    var cl = alltable[3].cloneNode(true);   //cloned original aggregate row after completing the resize  

    alltable[1].replaceWith(cl);            //replaced with top aggregate row 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/165781/ze/GridTopAggregate2050483245  

Reference: https://blazor.syncfusion.com/documentation/datagrid/events/#resizestopped  

Please let us know if you have any concerns. 

Regards, 

Rahul