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
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;
}
<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;
}
#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
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.
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.