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

White space above scrollbar on radgrid

5 Answers 188 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tony Upchurch
Top achievements
Rank 1
Tony Upchurch asked on 03 May 2010, 02:26 PM

I have set my radgrid header color to gray and I am not using a skin.  The problem is that I have a white box in the upper right corner of the grid above the scrollbar.  If I increase the width of my header to fill the space then I get a scroll bar at the bottom of the grid and the white box just gets pushed to the right.  How can i color this space without coloring the entire grid?  I have attached a file showing the area I am trying color.



5 Answers, 1 is accepted

Sort by
0
robertw102
Top achievements
Rank 1
answered on 03 May 2010, 03:33 PM
The fill that space when using a custom skin you need to set the css class .rgHeaderDiv used by the RadGrid header row to the same gray colour as your header.

I hope that helps.
0
Tony Upchurch
Top achievements
Rank 1
answered on 03 May 2010, 03:45 PM
I am not using a custom skin.

<telerik:RadGrid ID="rgWarehouseList" DataSourceID="dsWarehouseList" ShowHeader="true"
                        Width="210px" AutoGenerateColumns="false" GridLines="None" AllowPaging="True"
                        Skin="" EnableEmbeddedSkins="False" ImagesPath="~\Images\Grid\" CssClass="grid"
                        PageSize="300000" runat="server" AllowSorting="true" Height="400px"  >
                    <PagerStyle Position="Bottom" Mode="NextPrevAndNumeric" PagerTextFormat="{4} Showing {2}-{3} of {5}"
                        CssClass="gridpager" />
                    <MasterTableView AllowPaging="true" DataKeyNames="" AllowSorting="true"  HeaderStyle-CssClass="gridheaderstyle" >
                        <Columns>


.grid
{
    border:1px solid #CCCCCC;
}
.gridheaderstyle
{
    color:#000000 !important;
    font-size: 11px !important;
    font-weight: bold !important;
    background-color: #CCCCCC !important;
    border: 0px solid black;
    width:100% !important;
    height:20px !important;
    text-align:left;
}
.gridheaderstyle a
{
    color:Black !important;
    text-decoration:none;
}
0
Tony Upchurch
Top achievements
Rank 1
answered on 04 May 2010, 01:43 PM
I found two solutions to this problem.  I did not have to create a custom skin.  Create a style anywhere on your page with the name format like...

#MyRadGridName_GridHeader
#MyRadGridName_GridHeader table
   OR  (to hide the scroll bars)
#MyRadGridName_GridData 


For Example, this works in IE...

#ctl00_mainContent_rgWarehouseClass_GridHeader
{
  padding-right:0px !important;
  width:100% !important;
  border:0px solid black;
}

#ctl00_mainContent_rgWarehouseClass_GridHeader table
{
  border:0px solid red;
  width:100% !important;
}


OR
We can hide the scroll bar...

#ctl00_mainContent_rgWarehouseClass_GridData   
{   
    overflow-x:hidden !important;
    overflow-y:auto !important;
}
0
Hans
Top achievements
Rank 2
answered on 06 May 2010, 10:13 AM

I had a similar issue. For me adding the following CSS did the trick:

.RadGrid {
background-color: #eee; /* same color as scrollbar in my case */
}

.rgDataDiv {
background-color: #fff;
}

0
Pavlina
Telerik team
answered on 07 May 2010, 08:53 AM
Hello,

Thank you for sharing your findings with us - thus you can help other community members who stumble upon similar issue.

Sincerely yours,
Pavlina
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
Tony Upchurch
Top achievements
Rank 1
Answers by
robertw102
Top achievements
Rank 1
Tony Upchurch
Top achievements
Rank 1
Hans
Top achievements
Rank 2
Pavlina
Telerik team
Share this question
or