GroupHeaderColumnTemplate to allow the content of the Group Header be aligned with the columns
Currently, the GroupHeaderTemplate takes up the whole row. Once it exposes aggregates for all the fields, I will need an option to align them with the corresponding columns.
8 comments
ADMIN
Dimo
Posted on:19 Apr 2023 08:57
Hello Joseph,
This request is awaiting votes and customer demand for us to prioritize and schedule it for implementation. Please follow it to receive updates (if you haven't already).
A possible workaround is to construct a GroupHeaderTemplate that mimics a table row. You will need to take care of the proper "column" alignment with the main Grid table, depending on the column widths.
@using Telerik.DataSource
<TelerikGrid Data="@GridData"
Pageable="true"
Sortable="true"
Groupable="true"
FilterMode="GridFilterMode.FilterRow"
OnStateInit="@( (GridStateEventArgs<Employee> args) => OnGridStateInit(args) )">
<GridColumns><GridColumnField="@nameof(Employee.Name)" /><GridColumnField="@nameof(Employee.Team)"><GroupHeaderTemplate><tableclass="group-header-table"><tr><td>Name content</td><td>Team content</td><td>Salary content</td><td>OnVacation content</td></tr></table></GroupHeaderTemplate></GridColumn><GridColumnField="@nameof(Employee.Salary)" /><GridColumnField="@nameof(Employee.OnVacation)" /></GridColumns>
</TelerikGrid>
<style>.k-grouping-row > .k-table-td:has(.group-header-table) {
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
}
.group-header-table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
}
</style>@code {
private List<Employee> GridData { get; set; }
privatevoidOnGridStateInit(GridStateEventArgs<Employee> args)
{
var gridState = new GridState<Employee>();
gridState.GroupDescriptors = new List<GroupDescriptor>();
gridState.GroupDescriptors.Add(newGroupDescriptor()
{
Member = nameof(Employee.Team),
MemberType = typeof(string)
});
args.GridState = gridState;
}
protected override voidOnInitialized()
{
GridData = new List<Employee>();
var rnd = new Random();
for (int i = 1; i <= 20; i++)
{
GridData.Add(newEmployee()
{
Id = i,
Name = "Name " + i,
Team = "Team " + (i % 4 + 1),
Salary = (decimal)rnd.Next(1000, 3000),
OnVacation = i % 3 == 0
});
}
}
publicclassEmployee{
public int Id { get; set; }
publicstring Name { get; set; }
publicstring Team { get; set; }
public decimal Salary { get; set; }
public bool OnVacation { get; set; }
}
}
Regards,
Dimo
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Chris
Posted on:30 Mar 2023 14:38
We are working to replace your JQuery grid with a Blazor one and the unavailable Column Group Header template is blocking the initiative. Are there any documented/recommended workarounds? If there are no documented workarounds can you provide a strategy to implement this?
When the item status is "Unplanned", this means that the task is not scheduled for implementation for any specific release.
We prioritize requests based on their popularity, so it may take some time for this one to gain enough interest. Whenever this happens and we add the task to our short-term backlog, we will update the status.
Yes, I am following already. Any more info regarding this feature request? It's been a while so thought of checking.
ADMIN
Marin Bratanov
Posted on:08 Oct 2022 08:45
Hello,
The best way to get updates is to click the Follow button on the portal page.
This will send you emails for status changes (e.g., when a release is known).
Regards,
Marin Bratanov
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.