Multi-column Headers With Kendo Grid

Question

I don't know what this is called, and I've messed around a lot with the headerTemplate but can't figure out how to produce this look. I need the second row of column names to 'act normally' in terms of sorting and filtering, but everything I try breaks that. I have no idea if headerTemplate is even the right way to do this? Is there a name for this kind of grouping? My research is turning up a whole lot of nothing, so I suspect I'm using the wrong keywords. What is this layout called?

Note: for security reasons I can't post a code dump (super nervous about the image too). If a specific thing is needed, please let me know and I'll try to anonymize it. But, mostly I'm just looking for suggestions to try other than playing with the headerTemplate.

Answer 1

You won't be able to achieve multirow Group headers via Kendo grid on MVC, although there were discussion to add the feature in the current version(2014Q2) of Kendo. See below link for more reference:
Pivot Grid StackOverflow Reference

However, you can achieve the multirow header option via jquery on databound event of the grid. But it is a workaround rather than a perfect soultion.
Please see the js function for databound event to add multirow header:

 function onDataBound(arg) {
     var myElem = document.getElementById('trParentHeader'); //Check if Parent Header Group exist
     if (myElem == null){ // if parent Header doesnot exist then add the Parent Header
        $("#grid").find("th.k-header").parent().before("<tr id='trParentHeader'>  <th colspan='2' class='k-header'><strong>Products + Unit Price</strong></th>  <th scope='col' class='k-header'><strong>Single Units in Stock</strong></th></tr>");
     }
  }

For more understanding and a working example please see below Sample:

MultiRow-Column Header Sample

Please let me know if you if you have any queries.

Answer 2

This is now natively supported by the Kendo grid. Here's an example.