White space above scrollbar on radgrid

6 posts, 0 answers
  1. Tony Upchurch
    Tony Upchurch avatar
    7 posts
    Member since:
    Jun 2012

    Posted 03 May 2010 Link to this post


    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.



  2. robertw102
    robertw102 avatar
    265 posts
    Member since:
    Jul 2007

    Posted 03 May 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tony Upchurch
    Tony Upchurch avatar
    7 posts
    Member since:
    Jun 2012

    Posted 03 May 2010 Link to this post

    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;
    }
  5. Tony Upchurch
    Tony Upchurch avatar
    7 posts
    Member since:
    Jun 2012

    Posted 04 May 2010 Link to this post

    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;
    }
  6. Hans
    Hans avatar
    10 posts
    Member since:
    May 2009

    Posted 06 May 2010 Link to this post

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

  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 07 May 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017