We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Display Record Counts on Group Row

When grouping two or more columns, the first grouping only gives you the count of sub-groups. How do I get it to display the count of all records regardless of the sub-groupings?

For example: Given a table of issues, 1st Group is by Status and 2nd Group by Severity
Syncfusion Grid shows 2 items as the total count
- Status: New - 2 items
-- Severity: High - 1 item
--- List of columns for Record 1
-- Severity: Medium - 4 items
--- List of columns for Record 2
--- List of columns for Record 3
--- List of columns for Record 4
--- List of columns for Record 5

What I would like to see is that it shows the total count in all sub-groupings, which in this case is 5.
- Status: New - 5 items
-- Severity: High - 1 item
--- List of columns for Record 1
-- Severity: Medium - 4 items
--- List of columns for Record 2
--- List of columns for Record 3
--- List of columns for Record 4
--- List of columns for Record 5

Is this possible?


16 Replies 1 reply marked as answer

RN Rahul Narayanasamy Syncfusion Team May 31, 2021 08:59 AM UTC

Hi George, 

Greetings from Syncfusion. 

Query: Display Record Counts on Group Row- What I would like to see is that it shows the total count in all sub-groupings, which in this case is 5. 

We have validated your query and you want to show total number of count(total number of records) instead of particular number of records present in subgroup(Grouping). You can achieve your requirement by using Custom Aggregate. Find the below code snippets and sample for your reference. 

 
<SfGrid DataSource="@Products" AllowGrouping="true" AllowPaging="true"> 
    <GridGroupSettings Columns=@Units></GridGroupSettings> 
    <GridAggregates> 
        <GridAggregate> 
            <GridAggregateColumns> 
                <GridAggregateColumn Field=@nameof(Product.UnitsInStock) Type="AggregateType.Count"> 
                    <GroupCaptionTemplate> 
                        @{ 
                            var aggregate = (context as AggregateTemplateContext); 
                            <div> 
                                @*<p>Count: @aggregate.Count</p>*@ 
                                <p>Calaculated Count: - @GetCaculatedAggregate()</p> 
                            </div> 
                        } 
                    </GroupCaptionTemplate> 
                </GridAggregateColumn> 
                <GridAggregateColumn Field=@nameof(Product.UnitsInStock) Type="AggregateType.Count"> 
                    <FooterTemplate> 
                        @{ 
                            var aggregate = (context as AggregateTemplateContext); 
                            <div> 
                                <p>Count: @aggregate.Count</p> 
                            </div> 
                        } 
                    </FooterTemplate> 
                </GridAggregateColumn> 
            </GridAggregateColumns> 
        </GridAggregate> 
    </GridAggregates> 
    <GridColumns> 
        .  .. 
    </GridColumns> 
</SfGrid> 
 
@code{ 
 
    public List<Product> Products { get; set; } 
    private string[] Units = (new string[] { "QuantityPerUnit" }); 
    public string GetCaculatedAggregate() 
    { 
        // Here, we can calculate custom aggregate operations and return the result 
        return Queryable.Count(Products.Select(x => x).AsQueryable()).ToString(); 
    } 
    . ..  
} 

Reference


Please let us know if you have any concerns. 

Regards, 
Rahul 



GF George Franklin June 1, 2021 02:23 PM UTC

Is there a c# code snippet that will apply it all columns without having to create the GroupCaptionTemplate for every column? I want to avoid creating a GroupCaptionTemplate for every column displayed on the grid. Would rather have a code solution that will build that out dynamically.


RN Rahul Narayanasamy Syncfusion Team June 4, 2021 11:11 AM UTC

Hi George, 

Thanks for the update. 

Query: Is there a c# code snippet that will apply it all columns without having to create the GroupCaptionTemplate for every column? I want to avoid creating a GroupCaptionTemplate for every column displayed on the grid. 

We have validated your query and you want to create GroupCaptionTemplate for each column without having to define multiple GridAggregateColumn repeatedly. You can achieve your requirement by using below way. Here, we have iterate the Class properties and created GroupCaptionTemplate for each column in foreach loop. Find the below code snippets and sample for your reference. 

 
<SfGrid DataSource="@Products" AllowGrouping="true" AllowPaging="true"> 
    <GridGroupSettings Columns=@Units></GridGroupSettings> 
    <GridAggregates> 
        <GridAggregate> 
            <GridAggregateColumns> 
                @foreach (var prop in typeof(Product).GetProperties()) 
                { 
                    <GridAggregateColumn Field=@prop.Name Type="AggregateType.Count"> 
                        <GroupCaptionTemplate> 
                            @{ 
                                var aggregate = (context as AggregateTemplateContext); 
                                <div> 
                                    <p>Calaculated Count: - @GetCaculatedAggregate()</p> 
                                </div> 
                            } 
                        </GroupCaptionTemplate> 
                    </GridAggregateColumn> 
                } 
            </GridAggregateColumns> 
        </GridAggregate> 
    </GridAggregates> 
    <GridColumns> 
        <GridColumn Field=@nameof(Product.ProductName) HeaderText="Product Name" TextAlign="TextAlign.Right" Width="220"></GridColumn> 
        . . . 
    </GridColumns> 
</SfGrid> 


Please let us know if you have any concerns. 

Regards, 
Rahul 

 



GF George Franklin June 4, 2021 06:08 PM UTC

Actually, I was looking for a way to replace the number before the 'items' word with the new count. After going through the documentation again, I found that CaptionTemplate is what I actual want. How do I get the total count regardless of the sub-groups?

    <GridGroupSettings Columns=@Template>
        <CaptionTemplate>
            @{
                var order = (context as CaptionTemplateContext);
                <div>@order.HeaderText: @order.Key - @order.Count items</div>
            }
        </CaptionTemplate>
    </GridGroupSettings>
@order.Count only gives me the count of subgroups. I need the count of records in each subgroup.



VN Vignesh Natarajan Syncfusion Team June 7, 2021 12:40 PM UTC

Hi George,  
 
Thanks for the update.  
 
Query: “@order.Count only gives me the count of subgroups. I need the count of records in each subgroup. 
 
We have analyzed your query and we would like to inform you that we do not have direct support to get the sub group total count in CaptionTemplate context variable. So we request you to achieve your requirement using below way. We have defined a custom method and calculated the grouped data manually using GroupBy C# method.  
 
Refer the below code example.  
 
<SfGrid DataSource="@Products" AllowGrouping="true" AllowPaging="true"> 
    <GridGroupSettings Columns=@Units> 
        <CaptionTemplate> 
            @{ 
                var order = (context as CaptionTemplateContext); 
                        <div>@GetData(order)</div> 
            } 
        </CaptionTemplate> 
    </GridGroupSettings>   
    <GridColumns> 
        <GridColumn Field=@nameof(Product.ProductName) HeaderText="Product Name" TextAlign="TextAlign.Right" Width="220"></GridColumn> 
        <GridColumn Field=@nameof(Product.QuantityPerUnit) HeaderText="Quantity Per Unit" Width="150"></GridColumn> 
        <GridColumn Field=@nameof(Product.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
        <GridColumn Field=@nameof(Product.Status) HeaderText="Status" Width="150"></GridColumn> 
        <GridColumn Field=@nameof(Product.Severity) HeaderText="Severity" Width="150"></GridColumn> 
        <GridColumn Field=@nameof(Product.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 
        <GridColumn Field=@nameof(Product.UnitsInStock) HeaderText="Units In Stock" TextAlign="TextAlign.Right" Width="130"></GridColumn> 
        <GridColumn Field=@nameof(Product.Discontinued) HeaderText="Discontinued" TextAlign="TextAlign.Right" DisplayAsCheckBox="true" Type="ColumnType.Boolean"></GridColumn> 
    </GridColumns> 
</SfGrid> 
  
@code{ 
  
    public List<Product> Products { getset; } 
    private string[] Units = (new string[] { "Status""Severity" }); 
    public string GetData(CaptionTemplateContext args) 
    { 
        if (args.Field == nameof(Product.Status)) // for foreignkeycolumn 
        { 
            var val = Products.GroupBy(x => x.Status).Where(X => X.Key == args.Key).Select(x => x).ToList(); 
            return $"{args.Field} : {args.Key} - {val.First().Count().ToString()} items"; 
        } 
        else 
        { 
            return $"{args.Field} : {args.Key} - {args.Count.ToString()} items"; 
        } 
    } 
 
 
For your convenience we have attached the sample which can be downloaded from below  
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 



GF George Franklin October 4, 2021 08:26 PM UTC

The latest solution gives the count of all records ignoring the grouping. The count should match the number of records displayed in that group and sub-groups. While searching for a solution again, I came across a Syncfusion Knowledge Article that describes what I'm after. It can be found at  Customize the group caption text | WinForms - SfDataGrid (syncfusion.com). How do I implement this on the blazor side?



RN Rahul Narayanasamy Syncfusion Team October 6, 2021 03:52 AM UTC

Hi George, 

Thanks for the update. 

We are currently checking the reported query with the provided details and we will update the further details in two business days. Until then we appreciate your patience. 

Regards, 
Rahul 



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

Hi George, 

Thanks for your patience. 

We have validated your query and we suspect that you want to show the total record count in GroupCaption. Here, we have modified the sample to achieve this requirement. Now the count will be shown in the group caption. Please find the below code snippets and sample for your reference. 

 
<SfGrid DataSource="@Products" AllowGrouping="true" AllowPaging="true"> 
    <GridGroupSettings Columns=@Units> 
        <CaptionTemplate> 
            @{ 
                var order = (context as CaptionTemplateContext); 
                        <div>@GetData(order)</div> 
            } 
        </CaptionTemplate> 
    </GridGroupSettings>   
    <GridColumns> 
        <GridColumn Field=@nameof(Product.ProductName) HeaderText="Product Name" TextAlign="TextAlign.Right" Width="220"></GridColumn> 
        . ..  
    </GridColumns> 
</SfGrid> 
 
@code{ 
 
    public List<Product> Products { get; set; } 
    private string[] Units = (new string[] { "Status", "Severity" }); 
    public string GetData(CaptionTemplateContext args) 
    { 
        if (args.Field == nameof(Product.Status))  
        { 
            var val = Products.GroupBy(x => x.Status).Where(X => X.Key == args.Key).Select(x => x).ToList(); 
            return $"{args.Field} : {args.Key} - {val.First().Count().ToString()} items - Count: {args.Count}"; 
        } 
        else 
        { 
            return $"{args.Field} : {args.Key} - {args.Count.ToString()} items - Count: {args.Count}"; 
        } 
    } 
 
    . . . 
} 


Please let us know if you have any concerns. 

Regards, 
Rahul 
 



GF George Franklin October 8, 2021 10:21 PM UTC

You do realize this is the same solution sent on June 7. Please take the time to read what I'm after. From the first email I thought it was very clear. On October 4, I included a link to an existing Syncfusion Knowledge article that shows exactly what I'm after. The solutions provided so far doesn't accomplish what I'm after. In the knowledge article there is a screenshot that can be use as a reference. I would like that exact output.

Article:  Customize the group caption text | WinForms - SfDataGrid (syncfusion.com)



RN Rahul Narayanasamy Syncfusion Team October 12, 2021 03:29 AM UTC

Hi George, 

We have validated your query and we have added codes for showing the sub items count in the previously provided update(We have added and highlighted the added codes as Yellow). Now we have slightly changed the contents based on your shared link. Find the below code snippets and sample for your reference. 

public string GetData(CaptionTemplateContext args) 
    { 
         if (args.Field == nameof(Product.Status))  
        { 
            var val = Products.GroupBy(x => x.Status).Where(X => X.Key == args.Key).Select(x => x).ToList(); 
            return $"{args.Field} : {args.Key} - {val.First().Count().ToString()} records ({args.Count} Sub Groups)"; 
        } 
        else 
        { 
            return $"{args.Field} : {args.Key} - {args.Count.ToString()} records ({args.Count} Sub Groups)"; 
        } 
    } 

In the below screenshot, we have marked the total records present in the groups is marked as red color. And we have marked as blue for subitems in the particular group. Find the below screenshot for your reference. 

 

[Shared one] 
 


If we misunderstood your query or if we it does not meet your requirement, then could you please share more details about your requirement. 

Please let us know if you have any concerns. 

Regards, 
Rahul 



GF George Franklin October 12, 2021 08:07 PM UTC

I added a 3rd grouping in the results become skewed. The image below shows Sev - High with 2 records; however, there are actually 3 records.



Also, if I add the below lines of codes to GetData. The "Severity High 7 " shows a count of 7 but there are only 3 matching that grouping.

else if (args.Field == nameof(Product.Severity))

{

var val = Products.GroupBy(x => x.Severity).Where(X => X.Key == args.Key).Select(x => x).ToList();

return $"{args.Field} : {args.Key} - {val.First().Count().ToString()} records ({args.Count} Sub Groups)";

}



If I flip-flop Status and Severity grouping, the result are skewed.



I increased the count from 10 to 20 to get more records to work with.



RN Rahul Narayanasamy Syncfusion Team October 13, 2021 03:32 PM UTC

Hi George, 

Thanks for the update. 

We have validated your query and you want to display the total records count(for all the sub group record count) at the parent Grouping(top). Based on your scenario we suggest you to achieve your requirement by using Lazy Load Grouping. Find the below documentation for your reference. 


 
<SfGrid DataSource="@Products" AllowGrouping="true" AllowPaging="true"> 
    <GridGroupSettings EnableLazyLoading="true" Columns=@Units> 
        <CaptionTemplate> 
            @{ 
                var order = (context as CaptionTemplateContext); 
                        <div>@GetData(order)</div> 
            } 
        </CaptionTemplate> 
    </GridGroupSettings>   
    <GridColumns> 
        <GridColumn Field=@nameof(Product.ProductName) HeaderText="Product Name" TextAlign="TextAlign.Right" Width="220"></GridColumn> 
        . ..  
    </GridColumns> 
</SfGrid> 


 


Please  let us know if you have any concerns. 

Regards, 
Rahul 




GF George Franklin October 13, 2021 08:09 PM UTC

Still getting the same result. The Sub-Group count doesn't match the number of actual sub-groups. For example, The first line should be 'Status: New - 10 records (3 Sub Groups)





JP Jeevakanth Palaniappan Syncfusion Team October 14, 2021 03:33 PM UTC

Hi George, 

We would like to inform you that the caption template is used to customize the group caption area of the grid based on your scenario. You can perform your own custom calculation and return the result. The result of your custom calculation will be display. 

So we suggest you to perform your own custom calculation based on your requirement to display your custom text in caption template.  


    public string GetData(CaptionTemplateContext args) 
   
        if (args.Field == nameof(Product.Status)) 
       
            var val = Products.GroupBy(x => x.Status).Where(X => X.Key == args.Key).Select(x => x).ToList(); 
            var InnerCount = val.First().GroupBy(x => x.Severity).Select(x => x).ToList(); 
            return $"{args.Field} : {args.Key} - {val.First().Count().ToString()} records - { InnerCount.Count()} subitems"; 
       
        else 
       
            return $"{args.Field} : {args.Key} - {args.Count.ToString()} records"; 
       
   

Regards, 
Jeevakanth SP. 



GF George Franklin October 20, 2021 05:30 PM UTC

After realizing AggregateTemplateContext shared similar properties (i.e. HeaderText, Key, etc...) found in CaptionTemplateContext, I was able to resolve my issue. AggregateTemplateContext contains the counts I wanted and rolls up correctly along with the text I wanted to display.

        <GridAggregate>

            <GridAggregateColumns>

                <GridAggregateColumn Field=@nameof(Product.QuantityPerUnit) Type="AggregateType.Count">

                    <GroupCaptionTemplate>

                        @{

                            var aggregate = (context as AggregateTemplateContext);

                            <div>@aggregate.HeaderText: @aggregate.Key - @aggregate.Count items</div>

                        }

                    </GroupCaptionTemplate>

                </GridAggregateColumn>

            </GridAggregateColumns>

        </GridAggregate>


I hid the default group caption by doing the following...

    <GridGroupSettings Columns=@Units>

        <CaptionTemplate />

    </GridGroupSettings>




Marked as answer

RN Rahul Narayanasamy Syncfusion Team October 21, 2021 10:05 AM UTC

Hi George, 
 
Thanks for the update. 
 
We are happy to hear that you have achieved your requirement by yourself. Please get back to us if you need further assistance. 
 
Regards, 
Rahul 


Loader.
Up arrow icon