Static Header bar and Scrolling style issue

[christina noel]

When I have enabled scrolling and have a static header bar, there is a gap above the vertical scrollbar that displays the background color of my grid. (See whitegrid.png). Instead, I want it to display as if it was an extension of my header bar (see bggrid.png --  a doctored image). Or at the very least, change it to a different color -- the blue of the pager background and border. Is this possible, and how can I do it if it is?

If it matters, this particular grid is created dynamically in Page_Init, has virtual scrolling/paging enabled and uses a custom pager template.

Note that it is not possible for me to change my grid background color (which is white) to the color I want to display in the gap, since the grid background color also displays when I use virtual scrolling to scroll past the current page.

--Christina Noel

[Pavlina]

Hi Christina,

The observed behavior can be worked around by creating and applying a custom background image to the RadGrid outer <div> element, but this is not a universal solution either (i.e. the positioning of the background image will depend on the existence of a command row, the height of the header row, and the existence and height of the filter row.

CSS

div.MyCustomScrollImage
{
background: 0 0 repeat-x url(......) ;
}

Kind regards,
Pavlina
the Telerik team

[christina noel]

Thanks for the prompt reply.

I'm having a couple problems with this solution.

First, the header-bar background is part of the Telerik Office2007 theme, and we use more than one theme in our application. I would like the solution to be nonspecific to the theme on the particular grid.

Second, I'm not sure what the correct URL is for the header-bar background color in the Office2007 theme.

Third, (as I had already noted) I can't change the background color of the grid. As a demonstration of why, I've used the server-side command "grid.BackColor" (my grid is created in Page_Init) to set the grid background color to the same color as our custom pager bar (see the result in bluegrid.png). I played around with this a little by setting my MasterTableView background color to white, which looks ok unless there are fewer records than the scroll height or until you're partway through a virtual-scroll (see scrollgrid.png). In those cases the blue background color shows -- I would like that empty space to be white.

Maybe I'm missing something in the css background command that makes it possible to set the background of the grid so that the little square is blue (or the office2007 theme background) and the rest of the grid background is white. If I am, I'd appreciate more explicit instructions. The solution can assume a header bar with fixed height, no command row and no filter row, but has to accomodate the fact that the pager bars and scroll bar might not be there.

--Christina

--Christina

[Pavlina]

Hi Christina,

When dealing with custom skins, we need the CSS code in order to test it locally.

Best wishes,
Pavlina
the Telerik team

[christina noel]

Here is what I believe to be the relevant subset of our styling (we also do things that style our filter row, groups, pager row and footers, but those are irrelevant for this particular problem). Please start from a base of grid.Skin="Office2007" (Our blue is #CAE2FA, by the way, if you want to replicate it exactly).

I would like to note that even when I cancel all this styling and am working on the straight Office2007 skin, I still get that little square in the top corner that I think should not be the grid background color. It's even more noticeable in that case, actually, since the grid header borders don't completely surround the header cells. (see unstyledgrid.png)

body, p, form, table, tr, td, div, tbody, thead, a
{
    font-family : Tahoma;
    font-size : 8pt;
}
.text {
    line-height : 110%;
}

.textbold, a.textbold:link, tr.textbold td > *  {
    font-weight : bold !important;
    line-height : 110%;
}

th.text > a:link { color: #000; font-weight: normal; }

body .RadGrid_Office2007 .rgRow .rgExpandCol, body .RadGrid_Office2007 .rgAltRow .rgExpandCol
{
    padding-left: 1px;
}
body .RadGrid_Office2007
{
    border: 3px solid #cae2fa;
}

body .RadGrid_Office2007 .rgClipCells .rgHeader,
body .RadGrid_Office2007 .rgClipCells .rgRow > td,
body .RadGrid_Office2007 .rgClipCells .rgAltRow > td
{
    border: 0px;
    padding-top:2px;
    padding-bottom:2px;
}

body .RadGrid_Office2007 .rgHeader
{
    border: none;
}

body .RadGrid_Office2007 .rgRow TD,
body .RadGrid_Office2007 .rgAltRow TD
{
    border: none;
    padding-top: 2px;
    padding-bottom: 2px;
}

body .RadGrid_Office2007 .rgRow a,
body .RadGrid_Office2007 .rgAltRow a,
body .RadGrid_Office2007 .rgEditRow a,
body .RadGrid_Office2007 .rgFooter a,
body .RadGrid_Office2007 .rgEditForm a
{
    color: Black;
}

body .RadGrid_Office2007 .rgRow .rgSorted,
body .RadGrid_Office2007 .rgAltRow .rgSorted
{
    background-color: #FFFFFF;
}
body .RadGrid_Office2007 .rgSelectedRow .rgSorted
{
    background-color: inherit;
}

body .RadGrid_Office2007 .rgHeader,
body .RadGrid_Office2007 th.rgResizeCol
{
    padding-top: 1px;
    padding-bottom: 0px;
}

body .RadGrid_Office2007 th.rgSorted
{
    background-position: 0px -2300px;
    background-color: #C3D8F1;
}

body .RadGrid_Office2007
{
    border: none;
}

[Pavlina]

Hi Christina,

Please examine the sample code snippet below and let me know if it works for you:

<%@ 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 = 10;
    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>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<style type="text/css">

div.RadGrid_Default
{
    background:0 -7550px repeat-x url('<%= Page.ClientScript.GetWebResourceUrl(typeof(RadGrid), "Telerik.Web.UI.Skins.Office2007.Grid.sprite.gif")%>');
}

</style>
</telerik:RadCodeBlock>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="800px"
    Skin="Office2007"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="200px" />
    </ClientSettings>
</telerik:RadGrid>

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

All the best,
Pavlina
the Telerik team

[christina noel]

When I run your code as-is, the style doesn't apply (or is doing nothing). When I change the style so that it applies to div.RadGrid_Office2007, I get the result in appliedgrid.png. This is still not right -- it looks like that background is taller  than the row (that must be what you were talking about earlier with it being an imperfect solution) -- but it's close, so I played with it some more.

When I give the MasterTableView BackColor=white, the overlapping bit of border went away. This got me excited, so I added AllowPaging=true PageSize=7 to the grid and EnableVirtualScrollingPaging=true to the ClientSettings:

<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="800px"
    Skin="Office2007"
    OnNeedDataSource="RadGrid_NeedDataSource" AllowPaging=true PageSize=7>
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="200px" EnableVirtualScrollPaging=true/>
    </ClientSettings>
    <MasterTableView BackColor=White />

</telerik:RadGrid>

This solution works when scrolling down, but when scrolling up the extra height of the background shows up again (scrollupgrid.png)

I've been doing a little digging using firebug and I discovered that the header row looks like this:

<div style="overflow: hidden; margin-right: 17px;" class="rgHeaderDiv" id="RadGrid1_GridHeader">...</div>

When I set the grid background back to white and then use firebug to change margin-right:17px to padding-right:17px, the header looks exactly the way I want (see alteredgrid.png). Unfortunately, I don't think there's any way for me to programmatically specify that, right?

Sorry if I'm trouble,
Christina

[christina noel]

oops... scrollupgrid seems to have posted wrong... here's the realversion

[christina noel]

This has turned into a more serious issue with us (it showed up on another new grid), so I have submitted a support ticket for it.

--Christina

[Pavlina]

Hi Christina,

To avoid duplicate posts, we can continue our communication in the support ticket you have opened.

Best wishes,
Pavlina
the Telerik team