radgrid header style issue with static header and vertical scrollbar

[Mridul]

Hi,

here is a link to the screenshot which will explain the problem. I added custom header background image to the grid. The grid uses static headers and verticle scrollbars. Now when scrollbars appear there is no header image above the scrollbar.

[img]http://img65.imageshack.us/img65/7702/gridsmn3.jpg[/img]

Which property do i need to change/set to get this right.

Thanks
Mridul

[Dimo]

Hi Mridul,

Please apply the background styles for your RadGrid header cells also to:

div.GridHeaderDiv_SkinName
{
     background-image: ..... ;
     background-position: ..... ;
     background-repeat: repeat-x ;
}

You may need to adjust the background position a little, so that the image above the scrollbar aligns with the background of the header cells.

Let us know if you need further assistance.


Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mridul]

Dimo,

Thanks for your quick response. Following are the changes I've done in existing code. I'm not using any skin as of now.

//ASPX
HeaderStyle-CssClass="gridheadblue"

//CSS
.gridheadblue
{
    font-weight: normal;
    font-size: 11px;   
    color: #ffffff;
    font-family: Arial;
    height:27px;
    text-align:left;
    margin-left:10px;   
    padding-left:4px;
    background-image:URL(../images/table-head.jpg);
    background-repeat:repeat-x;
    background-position:top;
}

What other changes should I make? Increasing width in <HeaderStyle Width="20px"></HeaderStyle> allows me to strech the background image but it also results in a horizontal scrollbar which I don't need.

Is there a way that I can have a header background image encompassing the whole grid(including the scrollbar) and not causing a horizontal scrollbar to appear?

regards
Mridul

[Dimo]

Hi Mridul,

In case you are not using any skin (i.e. you have set Skin=""), then you have to add

div#RadGrid2_GridHeader ,
.gridheadblue
{
    font-weight: normal;
    font-size: 11px;   
    color: #ffffff;
    font-family: Arial;
    height:27px;
    text-align:left;
    margin-left:10px;   
    padding-left:4px;
    background-image:URL(../images/table-head.jpg);
    background-repeat:repeat-x;
    background-position:top;
}

RadGrid2 is the client ID of the RadGrid control.


All the best,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mridul]

Hi,

This worked for me. Please mark it as solved

Thanks

[David Mitchell]

This solution worked for me as well (it removed the space in the header above the scrollbar). The only problem is that we have column resizing enabled, and this seems to reall mess up the resizing.

What's happening is that when drag the first column to make it smaller, the left margin of the first column starts moving as well, shrinking the column and making the the grid seem to collapse in on itself.

Has anyone else noticed this behaviour? Is there a fix for it?

[Dimo]

Hi David,

I am not sure how to reproduce this. Have you set ItemStyle-Width? If yes, please remove those and use only HeaderStyle-Width.

Here is a simple demo, which works. You can modify it until the issue is exhibited and send it back for further inspection.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable dt = new DataTable();
    DataRow dr;
    int colsNum = 4;
    int rowsNum = 5;
    string colName = "Column";

    for (int j = 1; j <= colsNum; j++)
    {
        dt.Columns.Add(String.Format("{0}{1}", colName, j));
    }

    for (int i = 1; i <= rowsNum; i++)
    {
        dr = dt.NewRow();

        for (int k = 1; k <= colsNum; k++)
        {
            dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
        }
        dt.Rows.Add(dr);
    }

    (sender as RadGrid).DataSource = dt;
}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="1000px"
    Skin="Office2007"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
        <Resizing AllowColumnResize="true" EnableRealTimeResize="true" />
    </ClientSettings>
</telerik:RadGrid>

</form>
</body>
</html>

Best wishes,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.