Multiple header rows

[StevenDale]

Is it possible to have multiple header rows like the following attached image?

Thanks,

[Dimo]

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

[Insomniac82]

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]

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

[Stan]

Is this still unavailable?

[Dimo]

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

 

 

[Michael]

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]

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

 

 

[Robert Prediger]

Any news on this topic?

Best regards
   Robert

[Samra]

Did you find a solution to multiple header rows in kendo grid? :(

[Dimo]

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

[Gerry]

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]

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

[Dimo]

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