This is a migrated thread and some comments may be shown as answers.

radgrid header style issue with static header and vertical scrollbar

6 Answers 372 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mridul
Top achievements
Rank 2
Mridul asked on 10 Sep 2008, 07:35 AM

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

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 10 Sep 2008, 07:59 AM
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.
0
Mridul
Top achievements
Rank 2
answered on 10 Sep 2008, 09:08 AM
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
0
Accepted
Dimo
Telerik team
answered on 10 Sep 2008, 11:59 AM
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.
0
Mridul
Top achievements
Rank 2
answered on 25 Oct 2008, 05:31 AM
Hi,

This worked for me. Please mark it as solved

Thanks
0
David Mitchell
Top achievements
Rank 1
answered on 04 May 2010, 08:14 PM
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?
0
Dimo
Telerik team
answered on 07 May 2010, 03:33 PM
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"
 
<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.
Tags
Grid
Asked by
Mridul
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Mridul
Top achievements
Rank 2
David Mitchell
Top achievements
Rank 1
Share this question
or