[Solved] Is this possible? Grouped Headers, Nested Tabset

[Reid]

Hi All,

I was wondering if you can have grouped headers?  I have attached a screenshot of the official wireframe a Designer has given me for a search screen.  Bascially two or more columns in their own section with their own group header adjacent to two more columns with their own group header in their own section.

Also the screenshot shows a proposed Tabset in each row.  I am one to lobby for the tabset being on top and switching it's data out everytime the selected customer changes.  Any feedback others may have who have tried this appoach (using Ajax) or any suggestions would be appreciated.

Regards,
Reid

[Petur Subev]

Hi Reid,

Grouping column headers is not supported out of the box, to achieve it you can create a <table> above the Grid with the required column sizes and styling (it should use the same CSS classes as the Grid itself). The net effect is that it would look as merged headers. Or you can create a <thead> element dynamically on the OnLoad client event of the Grid.
e.g.

function Loaded(e) {
        $(this).find('thead').prepend('<tr>' +
                '<th  class="t-header" colspan="2">' +
                     '<span class="t-link">Group header for first 2 columns</span>'+
                '</th>'+
                 '<th  class="t-header" >'+
                    '<span class="t-link">Single header</span>'+
                '</th>'+
                '<th  class="t-header" >'+
                    '<span class="t-link">Single header</span>'+
                '</th>'    +
            '</tr>'
        );
    }

I hope this helps.

Regards,
Petur Subev
the Telerik team

[Reid]

Hi Petur,

Wow!  Thank you for this.


Reid