1. Home
  2. Forum
  3. Blazor
  4. Aggregates

Aggregates

Hi! I want to know if is possible to use the complete space of the aggregate, inspecting the component in the dom I saw when you have an aggregate for a column if I have for example a label for a sum like (Total: 1000000000) I want to position the Total label to the beginning of the aggregate no matter where the column of the sum is positioned. Something like the image I attached in the rar.
Thanks in advance

Attachment: aggregate_efe840.rar

7 Replies
RN Rahul Narayanasamy Syncfusion Team February 15, 2021 01:58 PM UTC

Hi Adriana, 

Greetings from Syncfusion. 

Query: Aggregates -- for example a label for a sum like (Total: 1000000000) I want to position the Total label to the beginning of the aggregate no matter where the column of the sum is positioned. 

We have validated you want to position the aggregate text(total text) to beginning of the aggregate row. Here, we have achieved your requirement by using Microsoft Interop(IJSRuntime) and DataBound event of the Grid. Find the below code snippets and sample for your reference. 

 
@using Syncfusion.Blazor.Grids 
@inject IJSRuntime JSRuntime  
 
<SfGrid DataSource="@Orders" AllowPaging="true"> 
    <GridEvents DataBound="Bound" 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 id="total">Total: </div> <div style="position: absolute; right: 10px;">@aggregate.Sum</div> 
                        } 
                    </FooterTemplate> 
                </GridAggregateColumn> 
            </GridAggregateColumns> 
        </GridAggregate> 
    </GridAggregates> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    public List<Order> Orders { get; set; } 
 
    . . . 
 
    public void Bound() 
    { 
        JSRuntime.InvokeAsync<object>("moveElement");    //calling JS function using Interop 
    } 
} 
[InteropFile.js] 
function moveElement() { 
    var ele = document.getElementById('total');   //get total text element using id 
    document.querySelectorAll('.e-summarycell')[0].append(ele);    //appended the text to first summary cell 
} 
[_Host.cshtml] 
<head> 
    . . . 
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" /> 
    <script src="~/InteropFile.js"></script> 
</head> 

 


Please let us know if you have any concerns. 

Regards, 
Rahul 


CR Chris Redfield replied to Rahul Narayanasamy September 26, 2021 12:14 PM UTC

Dear Rahul,


Is there some way to make the totals appear like this on the top of each other along with the gray background at footer?


Untitled.png


RN Rahul Narayanasamy Syncfusion Team September 27, 2021 10:50 AM UTC

Hi Chris, 

Greetings from Syncfusion. 

Query: Is there some way to make the totals appear like this on the top of each other along with the gray background at footer? 

We have validated your query and you want to render the aggregate content in top of the Grid content instead of bottom of the Grid. You can achieve your requirement by using below way. We have called an interop function in Grid Databound event and changed the aggregate position to the top of the Grid content. 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" AllowPaging="true"> 
    <GridEvents DataBound="Bound" 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> 
                                <div id="total">Total: </div> <div style="position: absolute; right: 10px;">@aggregate.Sum</div> 
                            </div> 
                        } 
                    </FooterTemplate> 
                </GridAggregateColumn> 
            </GridAggregateColumns> 
        </GridAggregate> 
    </GridAggregates> 
    <GridColumns> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    . ..  
 
    public async Task Bound() 
    { 
        await JSRuntime.InvokeAsync<object>("moveElement", Grid.ID);    //calling JS funcion using Interop 
    } 
} 
[InteropFile.js] 
function moveElement(id) { 
    var ele = document.getElementById('total'); 
    document.querySelectorAll('.e-summarycell')[0].append(ele); 
 
    var grid = document.getElementById(id); 
    var aggregateElement = grid.querySelector(".e-gridfooter"); 
    grid.insertBefore(aggregateElement, grid.querySelector(".e-gridcontent")); 
} 
[_Host.cshtml] 
<head> 
    . . . 
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" /> 
    <script src="~/InteropFile.js"></script> 
</head> 


 

Please let us know if you have any concerns. 

Regards, 
Rahul 


CR Chris Redfield replied to Rahul Narayanasamy October 6, 2021 05:00 PM UTC

Dear Rahul,


This is not what I want. I want the totals to appear below the Grid in the footer in vertical order but I want all the totals like:


Tax: 100

Net Total: 900

Gross Total: 1000


Currently the totals become like in the image under each column in mobile which I don't want.





RN Rahul Narayanasamy Syncfusion Team October 7, 2021 03:12 PM UTC

Hi Chris, 

Thanks for the update. 

We have validated your query and we suspect that you have provided small size of width to the Grid column. If the particular element have small space, then the text in that particular element will be wrapped and the text will be shown vertically by default. You can resolve the reported case by using below CSS. Find the below code snippets for your reference. 

 
<style> 
.e-grid .e-summarycell { 
    word-wrap: unset; 
} 
</style> 


We have also provided support for Adaptive UI which is used to provide an optimal viewing experience and improve usability on small screens. We have provided this support in recent volume 3 release. You can use this feature for better rendering in small screens. Find the below documentation for your reference. 


Please let us know if you have any concerns. 

Regards, 
Rahul 


AS Adam Swearingen January 19, 2023 04:56 PM UTC

Would this solution work when there are two grids on one page? I am trying to add a "Total" label on two different grids, but it moves them to the 1st grid only. How can I specify which grid the label should be moved on?


SP Sarveswaran Palani Syncfusion Team January 24, 2023 03:39 AM UTC

Hi Adam,

We recommend using a unique ID for each grid in order to effectively customize the grid based on your requirement using CSS. If you have any further questions or concerns, please get back to us.


Regards,
Sarvesh


Loader.
Up arrow icon