Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 07 May 2021 13:28 by ADMIN
Release 2.24.0
ali
Created on: 21 Jun 2019 12:15
Category: Grid
Type: Feature Request
34
Multiple Column Header

how to use Multiple Column Header in grid?

thanks

Duplicated Items
15 comments
Máté
Posted on: 03 Feb 2021 14:05
I solved it.
Máté
Posted on: 03 Feb 2021 13:16
Hi Philip! Did you do this headers with the Telerik Trial? Because it works for me with the trial, but when I changed to the licensed version, it slips apart... 
Attached Files:
Máté
Posted on: 03 Dec 2020 09:13
Thanks very much Philip! It works:)
Philip
Posted on: 03 Dec 2020 03:40

G'day Mate ;)

 

Try adding overflow: visible to .k-grid-header th.k-header

Then this should work on the specific group header styling;

z-index: 1;
 position: absolute;
 
 
Máté
Posted on: 02 Dec 2020 14:01

Hi Marin!

 

I reproduced Philip's solution to create multiple lines in the header, but I have a problem. How should I rewrite that version to handle the long group names? Now, if I have a long group name in the first column, or I have a narrow column, the text of the group name ends at the right side of the column. I tried to play with the z-indexes, but I think the problem is with that all of the k-headers have the same z-index, and it doesn't mind, what I set as the z-index in my template. Do you have an idea for this?

Thanks!

Máté

ADMIN
Marin Bratanov
Posted on: 23 Sep 2020 07:31

We do have Telerik points and I updated Philip's :)

 

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Andrius
Posted on: 23 Sep 2020 06:50
Wow Philip, thanks for your immediate response even after 4 months of the inactive topic. I really appreciate your shared solution; it works like a charm! You definitely deserve 1000 Karma points, bless you :) 
Philip
Posted on: 23 Sep 2020 03:21

Yes we did develop this functionality, although I didnt want to post because it needs a cleanup (is not very elegant)...nevertheless. here it is...

For example, this implementation floods the page with css styles as it applies for every component instance.

This can simply be fixed though by moving the styles which I have put inside the razor page, to global.

It works though ;)

 

Attached Files:
Andrius
Posted on: 22 Sep 2020 22:44
I'm wondering if there is any update on this? Philip, could you please runnable code of combined columns? I can't make it work
ADMIN
Marin Bratanov
Posted on: 03 Jun 2020 07:10

Hi Philip,

I am not sure there would be a better way. The way this generally works in a grid is through declarative definition of the column groups and the shared column header - under the covers that would probably populate a model or directly create component instances that render the needed markup. Hacking this through headers would either require that you hardcode the settings, or use a form of reflection or other traversal of column descriptor model collections.

If you post a simple runnable project with the sample (including the TelerikGridColumnHeaderGroup component), I'd award your contribution with Telerik points. I would also suggest using a slightly different name for this custom component to ensure it does not eventually clash with one we make (e.g., prefix it with "Custom").

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Philip
Posted on: 02 Jun 2020 13:42

I have done it!

Whats my prize? ;)

 

Although I just used string builder to generate the CSS classes... To make this more automated (without having to pass so many parameters to component), I guess you would have to use Reflections to count the columns in each group and find the middle column per group to show the header in that particular group?

 

Or can you see a better way?

 

 

 

<TelerikGrid Data="forecasts" FilterMode="@GridFilterMode.FilterMenu" Groupable="true" Resizable="true" >

    <GridColumns>
        <GridColumn Field="Date" />
        <GridColumn Field="TemperatureC">

            <HeaderTemplate>
                <TelerikGridColumnHeaderGroup ColumnGroupName="Temperature Group 1" ColumnName="TemperatureC" IsFirst="true" oddItemsInGroup="true" IsGrouped="true" ShowGroupHeader="true"/>
            </HeaderTemplate>

        </GridColumn>
        <GridColumn Field="TemperatureF">
            <HeaderTemplate>
                <TelerikGridColumnHeaderGroup ColumnGroupName="Temperature Group 2" ColumnName="TemperatureF" IsFirst="true" />
            </HeaderTemplate>

        </GridColumn>
        <GridColumn Field="TemperatureF">
            <HeaderTemplate>
                <TelerikGridColumnHeaderGroup ColumnGroupName="Temperature Group 2" ColumnName="TemperatureF" oddItemsInGroup="true" ShowGroupHeader="true" />
            </HeaderTemplate>

        </GridColumn>
        <GridColumn Field="TemperatureF">
            <HeaderTemplate>
                <TelerikGridColumnHeaderGroup ColumnGroupName="Temperature Group 2" ColumnName="TemperatureF" oddItemsInGroup="true" />
            </HeaderTemplate>

        </GridColumn>
        <GridColumn Field="Summary">
            <HeaderTemplate>
                <TelerikGridColumnHeaderGroup ColumnGroupName="Summary" ColumnName="Summary" oddItemsInGroup="true" IsFirst="true" ShowGroupHeader="true" />
            </HeaderTemplate>

        </GridColumn>
    </GridColumns>
</TelerikGrid>
Attached Files:
Philip
Posted on: 24 May 2020 12:27
Challenge.. accepted
ADMIN
Marin Bratanov
Posted on: 24 May 2020 12:10

Hello Philip,

You could try to hack similar appearance through the column header template: https://docs.telerik.com/blazor-ui/components/grid/templates#header-template

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Philip
Posted on: 24 May 2020 02:39

So while this is unplanned, is there an alternative? i.e. can you recommend a path for us to develop ourselves without disturbing the core functionality of the grid component? (templating etc)


 

ADMIN
Marin Bratanov
Posted on: 21 Jun 2019 12:35
Hello Ali,

The Telerik Blazor grid does not have a multi column header at the moment.

I moved your thread to our feedback portal so you can track the status of your feature request by clicking the Follow button. Here is the link so you can find the page from the email notification: https://feedback.telerik.com/blazor/1414347-multiple-column-header.


Regards,
Marin Bratanov
Progress Telerik UI for Blazor
Create an account Log In
View
Type
Status
Category