Is there a way to customize the display of the group header as presented in the aggregates grid demo?
For instance, we would like the header to appear as an aggregated row with grouped data and totals for numeric columns.
Ideally, the grid would start with all groups closed and look like a summary grid. Then when the user expanded a group, the detail would look like it is part of the same grid, with the same column headers and positions and sizes (as opposed to the way the hierarchy demo is laid out with separate grids for the details).
Thanks,
Take care,
Ken Rubin
10 Answers, 1 is accepted
I am not sure if I understand your scenario correctly, but if you need a groupable grid with aggregates, you could check the attached simple project. If this is not the case, please provide more details about the scenario you are trying to implement.
As a general information, please consider the following statements:
- The grid has collapseGroup() or collapseRow() methods, which could be used to collapse specified group or master row;
- The detailTemplate configuration option of the Kendo UI Grid could be used for rendering the visualization of the detail rows.
I hope this helps.
Greetings,
Iliana Nikolova
the Telerik team

If I understood the OP he wants what I want
A way to display the footer's data on the Header row
if I collapse a group ...
beside the package Name I need the totals: like I have in the groupfooter
so if the row is collapsed we can still see the numbers without having to expand the subgrid
Unfortunately the requested feature is not currently supported. However it will be nice if you can open a new request for feature in our UserVoice page, to allow other users vote for adding this feature to KendoUI.
Thank you in advance for your efforts. Wish you a great day.
Vladimir Iliev
the Telerik team

http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/2389907-grid
(does not appear completed, not sure why the tech marked it complete)
http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/3157093-grid-when-group-is-hidden-should-show-the-the-agg
(another way to go about it, not hiding the groupfootertemplate)
This feature is already implemented - you can check the groupHeaderTemplate configuration option in our documentation for more information.
Kind regards,
Vladimir Iliev
the Telerik team

@(Html.Kendo().Grid(Model.SA1)
.Name("sa1Grid")
.Columns(columns =>
{
columns.Bound(m => m.Id).Title("Customer")
.HeaderHtmlAttributes(new { @class = "col-head" })
.Width(90).Hidden();
columns.Bound(m => m.Name).Title("Site")
.HeaderHtmlAttributes(new { @class = "col-head" })
.ClientGroupFooterTemplate("Totals:");
columns.Bound(m => m.Year).Title("Year")
.HeaderHtmlAttributes(new { @class = "col-head" })
.Hidden();
columns.Bound(m => m.MonthName).Title("Month")
.HeaderHtmlAttributes(new { @class = "col-head" })
.Hidden();
columns.Bound(m => m.VolumeBudget).Title("Budget Lbs.")
.Format("{0:n0}")
.HtmlAttributes(new { @class = "col-volume" })
.HeaderHtmlAttributes(new { @class = "col-head-volume" })
.FooterHtmlAttributes(new { style = "text-align: right; font-size: 11px; font-weight: bold;" })
.ClientGroupHeaderTemplate("#=kendo.toString(sum,'N0')#")
.ClientGroupFooterTemplate("#=kendo.toString(sum,'N0')#")
.ClientFooterTemplate("#=kendo.toString(sum,'N0')#")
.Width(80);
columns.Bound(m => m.VolumeActual).Title("Actual Lbs.")
.Format("{0:n0}")
.HtmlAttributes(new { @class = "col-volume" })
.HeaderHtmlAttributes(new { @class = "col-head-volume" })
.FooterHtmlAttributes(new { style = "text-align: right; font-size: 11px; font-weight: bold;" })
.ClientGroupHeaderTemplate("#=kendo.toString(sum,'N0')#")
.ClientGroupFooterTemplate("#=kendo.toString(sum,'N0')#")
.ClientFooterTemplate("#=kendo.toString(sum,'N0')#")
.Width(80);
columns.Bound(m => m.VolumeDiff).Title("Var Lbs.")
.Format("{0:n0}")
.HtmlAttributes(new { @class = "col-volume" })
.HeaderHtmlAttributes(new { @class = "col-head-volume" })
.FooterHtmlAttributes(new { style = "text-align: right; font-size: 11px; font-weight: bold;" })
.ClientGroupHeaderTemplate("#=kendo.toString(sum,'N0')#")
.ClientGroupFooterTemplate("#=kendo.toString(sum,'N0')#")
.ClientFooterTemplate("#=kendo.toString(sum,'N0')#")
.Width(80);
columns.Bound(m => m.SalesBudget).Title("Budget $")
.Format("{0:c0}")
.HtmlAttributes(new { @class = "col-sales" })
.HeaderHtmlAttributes(new { @class = "col-head-sales" })
.FooterHtmlAttributes(new { style = "text-align: right; font-size: 11px; font-weight: bold;" })
.ClientGroupHeaderTemplate("#=kendo.toString(sum,'N0')#")
.ClientGroupFooterTemplate("#=kendo.toString(sum,'N0')#")
.ClientFooterTemplate("#=kendo.toString(sum,'C0')#")
.Width(80);
columns.Bound(m => m.SalesActual).Title("Actual $")
.Format("{0:c0}")
.HtmlAttributes(new { @class = "col-sales" })
.HeaderHtmlAttributes(new { @class = "col-head-sales" })
.FooterHtmlAttributes(new { style = "text-align: right; font-size: 11px; font-weight: bold;" })
.ClientGroupHeaderTemplate("#=kendo.toString(sum,'N0')#")
.ClientGroupFooterTemplate("#=kendo.toString(sum,'N0')#")
.ClientFooterTemplate("#=kendo.toString(sum,'C0')#")
.Width(80);
columns.Bound(m => m.SalesDiff).Title("Var $")
.Format("{0:c0}")
.HtmlAttributes(new { @class = "col-sales" })
.HeaderHtmlAttributes(new { @class = "col-head-sales" })
.FooterHtmlAttributes(new { style = "text-align: right; font-size: 11px; font-weight: bold;" })
.ClientGroupHeaderTemplate("#=kendo.toString(sum,'N0')#")
.ClientGroupFooterTemplate("#=kendo.toString(sum,'N0')#")
.ClientFooterTemplate("#=kendo.toString(sum,'C0')#")
.Width(80);
})
.Sortable()
.AutoBind(false)
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Group(group => {
group.Add(m => m.Id);
})
.Sort(sort => {
sort.Add(m => m.Id);
sort.Add(m => m.Name);
sort.Add(m => m.Year).Descending();
})
.Aggregates(aggregates =>
{
aggregates.Add(m => m.VolumeBudget).Sum();
aggregates.Add(m => m.VolumeActual).Sum();
aggregates.Add(m => m.VolumeDiff).Sum();
aggregates.Add(m => m.SalesBudget).Sum();
aggregates.Add(m => m.SalesActual).Sum();
aggregates.Add(m => m.SalesDiff).Sum();
})
.Read(read => read.Action("SA1_Read", "Sales")
.Data("sa1Params")
)
)
)
Please note that when you pass initial data to the Grid through the ViewModel (eg.: "@(Html.Kendo().Grid(Model.SA1)") for the initial load the Grid will use the server template (e.g.: GroupHeaderTemplate, Template..) and for the next requests it will loads the data using client templates (e.g.: "ClientGroupHeaderTemplate, ClientTemplate"). In current case you can achieve the desired behavior using one of the following approaches:
- Do not load initial data to the Grid - this way it will request the data initially, and render it using the ClientTempleate
- Use client templates and server templates at the same time (server template for the initial load and client template for next requests)
Vladimir Iliev
the Telerik team

I have a groupHeaderTemplate like below
groupHeaderTemplate: "<span> My column Name : #=value#; Items: #=count#</span> <span > <button type='button'>Yes</button> <button type='button'>No</button></span>"
I want the Column name and Items count to be Left aligned and the buttons to be right aligned. I have tried style:"float:right" and text-align:right. But doesn't seem to work. Any suggestions?

Could you create a JSFiddle with a sample of your code? Then it'll be possible to investigate it.
Regards,
Kate
As this thread is out of the original topic, may I kindly ask you to open a new support thread for the appropriate product (KendoUI grid for Web in that case)? That way we will be able to help you straight away.
Vladimir Iliev
Telerik