Grid group show count on each group header

[Gaysorn]

Hi All,

I have the kendo grid with group as below:

There are 2 groups

(1) Grant Name (want to count how many projects under the grant)

(2) Project Name (want to count how many items under the project)

I cannot get the count to show in each group header by using ClientGroupHeaderTemplate. My code below:

@(Html.Kendo().Grid<Grants.Models.ProjectView>()
    .Name("InProgress")
    .Columns(column =>
    {
        column.Bound(c => c.InvoiceDate).Title("Invoice Date").Width(130)
            .ClientTemplate("#if (MultipleCategory == 0)"
            + "{#<a onclick=\"windowSingleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
            + "#}else"
            + "{#<a onclick=\"windowMultipleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
            + "#}#")
            .ClientGroupHeaderTemplate("Count: #=count#");
        column.Bound(c => c.VendorName).Title("Vendor name");
        column.Bound(c => c.InvoiceNumber).Title("Invoice #");
        column.Bound(c => c.GrantFundedTotal).Title("Grant Funds Requested").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
        column.Bound(c => c.ContributionFundedTotal).Title("Match").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
        column.Bound(c => c.BudgetCategory).Title("Budget Category");                        
        column.Bound(c => c.ProcessedDate).Title("Process Date").Format("{0:d}").Width(130);
    })
    .Pageable()
    .Sortable()
    .Scrollable(s => s.Height("auto"))
    .ColumnMenu()
    .Mobile()                            
    .DataSource(ds => ds
        .Ajax()
        .Batch(true)
        .GroupPaging(true)
        .Model(m => m.Field(x => x.ProjectReimbursementId))
        .Group(g =>
        {
            g.Add(x => x.GrantName);
            g.Add(x => x.ProjectName);                                
        }) 
        .Aggregates(ag =>
        {
            ag.Add(x => x.GrantProjectId).Count();
            ag.Add(x => x.ProjectReimbursementId).Count();
            ag.Add(x => x.InvoiceDate).Count();
        })
        .Read(read => read.Action("MyReimbursementInProgress", "ProjectReimbursement"))
)

Thank you for your help.

[Ivan Danchev]

Hello Gaysorn,

To show count in the group headers:

1. Modify the aggregates and add the GrantName and ProjectName fields:

.Group(g =>
        {
            g.Add(x => x.GrantName);
            g.Add(x => x.ProjectName);                                
        }) 
        .Aggregates(ag =>
        {
            ag.Add(x => x.GrantProjectId).Count();
            ag.Add(x => x.ProjectReimbursementId).Count();
            ag.Add(x => x.InvoiceDate).Count();
            ag.Add(x => x.GrantName).Count();
            ag.Add(x => x.ProjectName).Count();
        })

2. Add columns bound to these fields with ClientGroupHeaderTemplate set, as shown below:

column.Bound(p => p.GrantName).ClientGroupHeaderTemplate("GrantName: #=value# (Count: #=count#)"); 
column.Bound(p => p.ProjectName).ClientGroupHeaderTemplate("ProjectName: #=value# (Count: #=count#)"); 

 

Regards,
Ivan Danchev
Progress Telerik

[Gaysorn]

Thank you for quick answer. From the sample Grant Name: Big Program Grant should have count projects = 2 but it looks like it count all the items in the project.   The Project Name: My Testing Project should have count = 2 and Project Name: Eye Screening should have item = 1, it counts correctly. How do I not showing the Grant and Project name display in the row column, They should show at the Group Header with the count only.

[Gaysorn]

I think I can achieve by hide the columns but still need to do the  count distinct for Grant Name. 

column.Bound(p => p.GrantName).ClientGroupHeaderTemplate("GrantName: #=value# (Count: #=count#)").Hidden(true); 
column.Bound(p => p.ProjectName).ClientGroupHeaderTemplate("ProjectName: #=value# (Count: #=count#)").Hidden(true); 

[Ivan Danchev]

Gaysorn,

The GrantName "count" value reflects the number of records that have that specific GrantName in their data. For example if you have the following exemplary data:

GrantName Biology
      Project 1:
           Item1
           Item2
      Project 2:
           Item3
           Item4

The count value will be 4, as all items with GrantName Biology are counted (Item 1-4).

If you want to have a custom counter that counts the sub groups, you can implement a custom function, do the calculation in it and return a value. It would look like this:

the column:

columns.Bound(p => p.GrantName).ClientGroupHeaderTemplate("GrantName: #=value# (Count: #=customCalculation(value, aggregates.ProjectName)#)");

the function:

<script>
    function customCalculation(grant, projectName) {
        var gridData = $("#grid").data("kendoGrid").dataSource.data();
        var count = 0;

        for (var i = 0; i < gridData.length; i++) {
            if (gridData[i].value == grant) {
                count = gridData[i].items.length;
            }
        }

        return count;
    }
</script>

"grid" (highlighted in green) should be replaced with the actual .Name() of the Grid, in order to get a proper reference to the component.

[Gaysorn]

Ivan Danchev,

Thank you for your quick reply, that it's exactly what I was looking for.