ClientGroupHeaderTemplate doesnt work

[James]

hi, 

i need to have a report (done using Grid) load with groups collapsed and showing the group totals.

if i use ClientGroupFooterTemplate it works but looks bad, see attached image.

how do i solve it? ideally i want to the see the group total on the 1st line of the group.  is the ClientGroupHeaderTemplate the answer?  btw, i cant get the Header to work in the same code where Footer code works.  below is the code:

 

<div id="ReportGridView" style="display: none;">
    @(Html.Kendo().Grid<VolumeViewModel>
        ()
        .Name("ReportGrid")
        .Columns(columns =>
        {
            columns.Bound(o => o.Firm).Width(130).Locked(true);
            columns.Bound(o => o.Collat).Width(70);
            columns.Bound(o => o.UserName).Width(100).Title("User");
            columns.Bound(o => o.Product).Title("Product Type").Width(110);
            columns.Bound(o => o.Symbol).Title("Symbol").Width(100);
            columns.Bound(o => o.Volume).Title("Amount (USD)").Width(160).Format("{0:n0}")
                    .ClientGroupFooterTemplate("Sub-total: #= kendo.toString(sum, \"n2\")#")
                    .ClientFooterTemplate("Period Total: #= kendo.toString(sum, \"n2\")#");
        })
        .ToolBar(tools => tools.Excel())
            .Excel(excel => excel
            .FileName("RevenueReport.xlsx")
            .Filterable(true)
            .AllPages(true)
            .ProxyURL(Url.Action("ExcelExportSave", "ReportGrid"))
            )
        .Sortable()
        .AllowCopy(true)
        .ColumnMenu()
        .Groupable(group => group.ShowFooter(true))
        .Resizable(resize => resize.Columns(true))
        //.Scrollable(scrollable => scrollable.Virtual(true))
        .Scrollable(s => s.Height("400px"))
        .Filterable(filterable => filterable
        .Extra(true)
        .Operators(operators => operators
        .ForNumber(n => n.Clear()
        .IsEqualTo("Is Equal To")
        .IsGreaterThan("Is Greater Than")
        .IsGreaterThanOrEqualTo("Is Greater Than Or Equalt To")
        .IsLessThan("Is Less Than")
        .IsLessThanOrEqualTo("Is Less Than Or Equal To")
        )
        .ForDate(d => d.Clear()
        .IsEqualTo("Is Equal To")
        .IsGreaterThan("Is Greater Than")
        .IsGreaterThanOrEqualTo("Is Greater Than Or Equal To")
        .IsLessThan("Is Less Than")
        .IsLessThanOrEqualTo("Is Less Than Or Equal To"))
        )
        )
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Row)
        )
        .AutoBind(false)
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(100)
            .Model(model =>
            {
                model.Id(p => p.Firm);
                model.Field(p => p.Collat).Editable(false);
                model.Field(p => p.UserName).Editable(false);
                model.Field(p => p.Product).Editable(false);
                model.Field(p => p.Symbol).Editable(false);
                model.Field(p => p.Volume).Editable(false);
            })
        .Read(read => read.Action("Volume", "ReportGrid")
        .Data("GetGridData"))
        .Group(groups =>
        {
            groups.Add(model => model.Firm);
            groups.Add(model => model.Collat);
            groups.Add(model => model.UserName);
            groups.Add(model => model.Product);
            groups.Add(model => model.Symbol);
        })
        .Aggregates(aggregates =>
        {
            aggregates.Add(model => model.Volume).Sum();
        })

        .Events(events => events.Error("onError").Change("onChange"))
        ))
</div>

 

 

[Konstantin Dikov]

Hi James,

Having locked columns and header/footer templates should not cause problems with the layout with our latest version. Using the following online demo, setting Width to the columns and enabling scrolling and grouping renders the Grid correctly:

• http://demos.telerik.com/aspnet-mvc/grid/aggregates

Here is the modified configuration that works correctly on my side:

<%@ Page Title="" Language="C#" MasterPageFile="~/Areas/aspx/Views/Shared/Web.Master" %>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">

<%: Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ProductName)
                .ClientFooterTemplate("Total Count: #=count#")
                .ClientGroupFooterTemplate("Count: #=count#").Width(400).Locked(true);
            columns.Bound(p => p.UnitPrice).Format("{0:C}").Width(400);
            columns.Bound(p => p.UnitsOnOrder)
                .ClientFooterTemplate("Average: #=average#")
                .ClientGroupFooterTemplate("Average: #=average#").Width(300);
            columns.Bound(p => p.UnitsInStock)
                .ClientGroupHeaderTemplate("Units In Stock: #= value # (Count: #= count#)")
                .ClientFooterTemplate("Period Total: #= kendo.toString(count, \"n2\")#").Width(300);
        })
        .Pageable()
        .Sortable()
         .Groupable(group => group.ShowFooter(true).Enabled(true))
          .Scrollable(s => s.Height("400px"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Aggregates(aggregates =>
            {
                aggregates.Add(p => p.UnitsInStock).Min().Max().Count();
                aggregates.Add(p => p.UnitsOnOrder).Average();
                aggregates.Add(p => p.ProductName).Count();
                aggregates.Add(p => p.UnitPrice).Sum();
            })
            .Group(groups => groups.Add(p => p.UnitsInStock))
            .Read(read => read.Action("Aggregates_Read", "Grid"))
        )
    %>
</asp:Content>

Can you please try your configuration with our latest version? Additionally, please ensure that there are no JavaScript errors on the page.
 

Regards,
Konstantin Dikov
Telerik