Make Entire Grid Heading Clickable/Sortable

[Levi]

Is there an easy way to make the entire heading of a grid column sortable so they don't have to click directly on the label to sort? 

[Levi]

Any word from Telerik on this? I'm basically try to get the same header click behavior as the MVC grids, where you get a hover effect and can click anywhere on the header column to sort.

[Nikita Gourme]

Does setting HeaderImageUrl for the column in question suits your case? Thus when you enable sorting for the column and specify header image, you should be able to click anywhere in the column header to sort.

Another thing that comes to my mind is to wire the ItemDataBound event of the grid, fold the header link in span with 100% width and make it clickable in the same way as the auto-generated link.

Nikita

[Levi]

I'd rather just change the CSS of the grid. I'm thinking maybe the hyperlink could be set to display:block. My concern is messing up the sort indicator. There has to be a way to do it since the MVC grids behave this way. Also I need to be able to specify hover css so I can change the header background color when they hover over it. 

[Levi]

Setting "display:block" on .RadGrid_swExcel2010 .rgHeader a,   sorta works but causes the sort symbol to wrap which I don't want.

[Levi]

Can I please get a reply from Telerik on this? Thanks!

[Veli]

Hello Levi,

You need to make a small adjustment to the control in the header cells before you can use CSS to make the sort link span the entire cell. You can use RadGrid's ItemCreated event to execute the following piece of code:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        foreach (TableCell cell in e.Item.Cells)
        {
            if (cell.Controls.Count > 1 && cell.Controls[1] is LiteralControl)
            {
                (cell.Controls[1] as LiteralControl).Text = "";
            }
        }
    }
}

Now you can use the following CSS on your page (note the CSS is RadGrid skin-independent):

div.RadGrid thead th.rgHeader
{
    padding:0 !important;
}
div.RadGrid thead th.rgHeader a
{
    display:block;
    padding: 4px 7px;
}
div.RadGrid thead th.rgHeader:hover
{
    background-position:0 -2600px;
}
div.RadGrid thead th.rgHeader.rgSorted
{
    position:relative;
}
div.RadGrid thead th.rgHeader.rgSorted input.rgSortAsc,
div.RadGrid thead th.rgHeader.rgSorted input.rgSortDesc
{
    float:right;
    margin-top:-16px;
}

The result is a clickable header cell that has a hover effect. Attaching a test page to demonstrate. Note that this scenario is supported with single line header cells only. Header cell text wrapping on 2 or more lines is not supported.

Greetings,
Veli
the Telerik team

[Levi]

Thanks so much for putting this together although without being able to support 2-3 lines, this won't work for me as many of my grids have two lines. Is there nothing I can do in this case? If not, do you know if this will be supported in the future as it is for the MVC grids?

Thanks,
Levi

[Veli]

Hello Levi,

The sorting functionality of the MVC Grid currently does not support wrapping text in the header cells. The links inside have an explicit height in pixels and any wrapping text is hidden.

For RadGrid for ASP.NET AJAX, you have to add the specific styles of  the .rgSorted CSS class to your :hover styles for the header cells. For the Office2007 skin, this would be:

div.RadGrid thead th.rgHeader:hover
{
    background-color:#FFCA5E;
    background-position:0 -2600px;
    border-bottom-color:#FF9B35;
}

For other skins, you have to look for the .rgSorted styles in the RadGrid stylesheets fetched by the resource handler.

For the ascending or descending sorting image, things get a little messier. The easiest setup is to have it render in the top right corner of the header cell. To do that, we need to have it exchange places with the sort link. Thus, it renders before the sort anchor (<a>) and when floated, goes to the right top edge.

The code-behind ItemCreated event handler thus becomes:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        foreach (TableCell cell in e.Item.Cells)
        {
            if (cell.Controls.Count > 1 && cell.Controls[1] is LiteralControl)
            {
                (cell.Controls[1] as LiteralControl).Text = "";
            }

            if (cell.Controls.Count > 2)
            {
                Control ctrl2 = cell.Controls[2];
                cell.Controls.Remove(cell.Controls[2]);
                cell.Controls.AddAt(0, ctrl2);
            }
        }
    }
}

And the CSS is now:

div.RadGrid thead th.rgHeader
{
    padding:0 !important;
}
div.RadGrid thead th.rgHeader a
{
    display:block;
    height:100%;
    padding: 4px 7px;
}
div.RadGrid thead th.rgHeader:hover
{
    background-color:#FFCA5E;
    background-position:0 -2600px;
    border-bottom-color:#FF9B35;
}

div.RadGrid thead th.rgHeader.rgSorted input.rgSortAsc,
div.RadGrid thead th.rgHeader.rgSorted input.rgSortDesc
{
    float:right;
}

The result is shown in the attached screen shot.

Sincerely yours,
Veli
the Telerik team

[Levi]

Thanks so much for doing this. Do you happen to have this code available as a sample project I can download? I tried implementing everything the code listed but the whole column header is still not clickable. It will only work if the mouse cursor is parallel with the label. If I click on the bottom of the header for instance, the header highlights properly but the click doesn't do anything. Does this happen in your version? 

[Veli]

Hi Levi,

To have the links stretch vertically an take up the entire cell height you need to set explicit height in pixels either to the links themselves or their parent header cells. Attaching a test page.

Greetings,
Veli
the Telerik team

[Levi]

You guys have amazing support! This works great. Sorry to be a pain, but I just have one last question... I see that by setting the height explicitily the labels will no longer vertically center if they are only one line. I studied the Google Analytics grid and I see they got around this by putting the click handling on the TH instead of using an anchor tag. Is there a way I can somehow move the click code to the TH. Or another idea I had was putting a <span> with display:block inside the anchor tag and applying the padding to that instead. Any ideas on how I might make the labels vertically center regardless of the # of lines? 

Thanks again for all your help!

Levi

[Veli]

Hello Levi,

Putting a span with display:block; is functionality equivalent to what we are doing already. In our case, the anchors themselves are displayed as block elements with padding. This would not work if you wanted to center the header text vertically.

You are left with using javascript for delegating the click event of the header cell to the link inside. To do that:

1. Attach an onclick event handler to your header cell from the server-side:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        foreach (TableCell cell in e.Item.Cells)
        {
            cell.Attributes["onclick"] = "applySort(this, event);";
        }
    }
}

2. Simulate clicking the sort link in the header cell when the header cell itself is clicked:

function applySort(headerCell, eventArgs)
{
    var anchors = headerCell.getElementsByTagName("a");
    var target = eventArgs.target || eventArgs.srcElement;

    if (anchors.length > 0 && anchors[0] !== target)
    {
        var sortLink = anchors[0];
        if (sortLink.onclick)
            sortLink.onclick();
        else
            eval(sortLink.href);
    }
}

Using the above approach, we now only need to apply the :hover CSS style to the header cells:

div.RadGrid thead th.rgHeader:hover
{
    background-color:#FFCA5E;
    background-position:0 -2600px;
    border-bottom-color:#FF9B35;
    cursor:pointer;
}

Test page is attached.

Veli
the Telerik team

[Levi]

Thanks so much! You guys have the best support ever. This works perfect and will improve the usabilty of my application.

Levi