Multiple header rows

2 Answers 3249 Views
Grid
StevenDale
Top achievements
Rank 2
StevenDale asked on 29 May 2013, 02:04 AM
Is it possible to have multiple header rows like the following attached image?

Thanks,

2 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 29 May 2013, 09:10 AM
Hi Billy,

I am afirad the Grid does not support multiline headers. Theoretically, the shown look can be achieved by using header and column templates, but this will prevent you from using sorting and filtering on each third-level column. That's why I recommend you to place the first-line and second-line header labels above the Grid and align the header cells and "fake" headers.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Insomniac82
Top achievements
Rank 1
commented on 17 Jul 2013, 12:05 PM

I've added an additional column header row to my grid by adding the following after the grid declaration.
<script type="text/javascript">
     $(document).ready(function () {
          $("#Grid").find("thead").first().prepend("<tr><th class='k-header' style='text-align: center;font-weight:600' colspan='13'>Device</th><th class='k-header' colspan='10'>Command</th></tr>");
});
</script>

The only thing that doesn't seem to work correctly is the column resizing.  The grid assumes that the first row is the resizing row.  How can I tell the grid to use the second row for column resizing?
Dimo
Telerik team
commented on 17 Jul 2013, 12:11 PM

Hello,

I am afraid there is no way for the Grid to distinguish between the two header rows. You need to sacrifice the column resizing functionality in order to have multicolumn headers in this scenario.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Stan
Top achievements
Rank 1
commented on 18 Mar 2014, 09:51 PM

Is this still unavailable?
Dimo
Telerik team
commented on 19 Mar 2014, 08:13 AM

Hello Stan,

Yes, multirow headers are still unsupported, but we are currently researching on the development of a pivot grid, which is a related task. As a result, this feature may be introduced in the foreseeable future, but excluding Q2 2014. You can keep an eye on our roadmap, which is updated within a month after each major release. (By the way, Q1 2014 is to be released this week.) 

http://www.telerik.com/support/whats-new/kendo-ui-web/roadmap

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Michael
Top achievements
Rank 1
commented on 28 Apr 2014, 08:25 PM

Hello Dimo, 

We are also looking for some solution that will help us to use Multiple header rows in the Grid or in PivotGrid. 

Is it possible to give us some estimation when it is going to be implemented? Unfortunately the link to road map you provided is empty.

Thank you,

Michael Menzel
Dimo
Telerik team
commented on 29 Apr 2014, 06:36 AM

Hello Michael,

Multirow headers will be available in the Pivot Grid, which we are currently developing with the idea of releasing it for Q2 2014. We may port the implementation for the standard Grid for subsequent releases, but I am afraid I can't provide official information about the timing and probability at this point.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Robert Prediger
Top achievements
Rank 1
commented on 29 Oct 2014, 05:07 PM

Any news on this topic?

Best regards
   Robert
Samra
Top achievements
Rank 1
commented on 17 Mar 2017, 02:03 AM

Did you find a solution to multiple header rows in kendo grid? :(
Dimo
Telerik team
commented on 17 Mar 2017, 08:41 AM

Hi Samra,

Multiple header rows can imply multi-column headers, which is already supported...

http://demos.telerik.com/kendo-ui/grid/multicolumnheaders

... or text wrapping in the header cells, which is achieved like this:

.k-grid .k-grid-header th.k-header {
  white-space: normal;
}

Let me know if you are trying to do anything else.

Regards,
Dimo
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Gerry
Top achievements
Rank 1
Veteran
commented on 05 Jun 2017, 05:39 PM

Sorry Dimo, that is not what multiple header rows looks like. Multiple headers looks like:

[ header columns ]
[ data ]
[ different header columns ]
[data]

in a single table.

 

Dimo
Telerik team
commented on 06 Jun 2017, 07:13 AM

Hello Gerry,

I am afraid the Kendo UI Grid does not support such a scenario. You can achieve it by using two Grids one below the other.

On a side note, can you show us a third-party component that supports this setup? I will be interested to take a look.

Regards,
Dimo
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dimo
Telerik team
answered on 30 Oct 2014, 04:13 PM
The discussed functionality has been implemented.

http://www.telerik.com/support/whats-new/kendo-ui/release-history/q3-2014-beta

http://demos.telerik.com/kendo-ui/Beta/grid/multicolumnheaders

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.columns

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
StevenDale
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Share this question
or