Hi,
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
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
0
Hi Ken,
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:
I hope this helps.
Greetings,
Iliana Nikolova
the Telerik team
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
David OBrien
Top achievements
Rank 1
Rank 1
answered on 28 Aug 2012, 04:20 PM
I know this is old but ....
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
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
0
Hi Ken,
Vladimir Iliev
the Telerik team
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Hatton Point
Top achievements
Rank 1
Rank 1
answered on 30 Apr 2013, 08:17 PM
+1 Needing exactly the same thing as David mentioned. Any solution for this yet? I've checked UserVoice and only found the following:
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)
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)
0
Hi Hatton,
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
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Hatton Point
Top achievements
Rank 1
Rank 1
answered on 01 May 2013, 03:38 PM
That does not appear to work in my case. Am I missing something? The footer template shows up just fine, but the header template displays only "Customer: {Id}".
@(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") ) ))0
Hi Ken,
Kind Regards,
Vladimir Iliev
the Telerik team
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Feroz
Top achievements
Rank 1
Rank 1
answered on 19 Jun 2013, 08:14 PM
Hi,
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?
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?
0
Kate | D-Flo
Top achievements
Rank 1
Rank 1
answered on 20 Jun 2013, 11:07 AM
Feroz,
Could you create a JSFiddle with a sample of your code? Then it'll be possible to investigate it.
Regards,
Kate
Could you create a JSFiddle with a sample of your code? Then it'll be possible to investigate it.
Regards,
Kate
0
Hi Feroz,
Vladimir Iliev
Telerik
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!