ClientGroupHeaderTemplate doesnt work

2 posts, 0 answers
  1. James
    James avatar
    12 posts
    Member since:
    Jun 2015

    Posted 18 May 2016 Link to this post

    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>


     

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 20 May 2016 Link to this post

    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:
    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top