Only Horizontal Scrollbar for RadGrid

19 posts, 0 answers
  1. kachy
    kachy avatar
    89 posts
    Member since:
    Aug 2005

    Posted 11 Jun 2009 Link to this post

    Is there a way to have only Horizontal Scrollbar in a radgrid? When I enable scrolling in ClientSettings, both Horizontal and Vertical scrollbar shows up. I want to have only Horizontal scrollbar and the height of the grid should adjust as per the number of records, which happens when you don't have scrolling enabled. I also tried using Scrollheight, in that case if the number of records are less than what can be shown in that height, there is whitespace for the rest of the height.

    Thanks
  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 11 Jun 2009 Link to this post

    Hi,

    I suggest you review the following thread in our public forums which elaborates on the same subject:
    Display horizontal scroll only

    Sincerely yours,
    Pavlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. kachy
    kachy avatar
    89 posts
    Member since:
    Aug 2005

    Posted 11 Jun 2009 Link to this post

    I used the Style to hide the Vertical scrollbar but I also want to remove the white space at the bottom of the grid if the number of rows for the grid is less. It shows the white space for the rest of the height of teh grid.
    And also if the number os rows is more than which can fit in the specified height, I cannot access those rows.

    I also set the MastertableView height , then if there are only 3 rows, each rows height increases to fill the whole height of the grid. I don't want that either.

    Is there a way to show only Horizontal scroll bar and the height of the grid adjusts itself dynamically as per the number of rows?

    Thanks.
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 11 Jun 2009 Link to this post

    Hello,

    The empty space on the right is expected and appears when the RadGrid MasterTableView is in automatic TableLayout mode. In order to remove the empty space, please do one of the following:

    1) set TableLayout="Fixed" for the MasterTableView
    2) set Width for the MasterTableView
    3) set larger column widths

    Additionally, please note that when using the ScrollHeight property, the RadGrid Height property must not be used.

    I hope this helps.

    Sincerely yours,
    Pavlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. kachy
    kachy avatar
    89 posts
    Member since:
    Aug 2005

    Posted 12 Jun 2009 Link to this post

    I am going to explain my problem once again. Width and Horizontal scrollbar for the grid is working fine. I am having problem with the Vertical scrollbar. when I enable scrolling for the grid, Vertical Scrollbar appears and whatever scrollheight is set, the grid height always stays that much. Is there a way, I can show only horizontal scrollbar and the height of the grid adjusts as per the number of rows in the grid? When I use the stylesheet explained in one of the link you provided, to hide vertical scrollbar, some of the rows cannot be reached, if the number of rows exceeds than the scrollheight setting.
    Is there a setting in the grid like scrollbar=auto to show the scrollbars when needed as we have in radtabstrip and multipage?

    Thanks.
  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 16 Jun 2009 Link to this post

    Hello Kachy,

    I am not sure if I understand your scenario completely.
    At this point it will be best if you can open a formal support ticket and send us a simple running project demonstrating the problem. In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

    Greetings,
    Pavlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  8. kachy
    kachy avatar
    89 posts
    Member since:
    Aug 2005

    Posted 23 Jun 2009 Link to this post

    I had to set the height of grid programatically, so that the vertical scrollbar does not show up. I think, if there are different settings for vertical and horizontal scrollbar, it will be better.

    Thanks anyway.
  9. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 25 Jun 2009 Link to this post

    Hello,

    The solution for your case is to reduce the Height property of the grid by setting it to 75% (for example) or as you said dynamically change the height of the control as shown here:
    http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandsplitterresizing/defaultcs.aspx?product=splitter

    Best wishes,
    Pavlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  10. santhosh
    santhosh avatar
    7 posts
    Member since:
    Aug 2010

    Posted 09 Aug 2010 Link to this post

    Just reduce width for one column
    say if the radgrid width is 600 means
    if you having three columns
    For example
    first column width=200
    second columnwidth=200
    third column width=180
    giving like this you can avoid Horizontal scrollbar for RadGrid
    Thanks!
  11. Stephen
    Stephen avatar
    12 posts
    Member since:
    Oct 2010

    Posted 29 Sep 2011 Link to this post

    Is there any plan to introduce a vertical scrolling = "false" property or something like that?

    It seems like the above suggestions are quite tedious for something like this.

    (Of course, as a developer, I understand it's not usually always that simple.)
  12. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 29 Sep 2011 Link to this post

    Hello Stephen,

    If you specify Height/ScrollHeight for the grid big enough to accommodate all rendered grid items without the need to display vertical scroll, then eventually only horizontal scroll will be rendered. See the description on this demo for more info.

    We do not have plans to introduce individual properties which to control the vertical and horizontal grid scroll separately.

    Kind regards,
    Sebastian
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  13. Stephen
    Stephen avatar
    12 posts
    Member since:
    Oct 2010

    Posted 29 Sep 2011 Link to this post

    Thanks for the fast reply.

    Works well.

    :-)
  14. Zachary
    Zachary avatar
    20 posts
    Member since:
    Aug 2012

    Posted 16 Aug 2012 Link to this post

    For future reference to other users who view this topic, I was able to fix the issue of a vertical scrollbar appearing by overriding the CSS. This should auto-expand your table's height.
    .rgDataDiv
    {
    height:auto !important;
    }

  15. Antonio
    Antonio avatar
    10 posts
    Member since:
    Oct 2011

    Posted 15 Oct 2012 Link to this post

    @Zachary Brilliant!, this solve for me too!
  16. Alex
    Alex avatar
    1 posts
    Member since:
    Nov 2012

    Posted 09 Nov 2012 Link to this post

    @Zachary It doesn't work in IE7. :(
  17. Megha
    Megha avatar
    1 posts
    Member since:
    Dec 2011

    Posted 03 Jan 2013 Link to this post

    The css steps didn't work for me . Listing the solution that worked for me to get  rid of the vertical scroll bar   and keeping only the horizontal scroll bar

    1. Turn the scrolling on   and registered a  client side event handler on OnGridCreated event

     <clientsettings>
    
     <Scrolling AllowScroll="True"  UseStaticHeaders="True" ></Scrolling>
     <ClientEvents OnGridCreated="GridCreated" />
     </ClientSettings>

    2. I  added a  following  client side event handler -  that will set the the property ScrollHeight to a value  larger than
    actual current height of the  grid so the need for scrollbar is eliminated

      <script type="text/javascript" language="javascript">

     function GridCreated(sender, args) {
                             var scrollArea = sender.GridDataDiv;
                             var dataHeight = sender.get_masterTableView().get_element().clientHeight; 
                             scrollArea.style.height = dataHeight + 17 + "px";
                    }

    </script>
  18. Headache
    Headache avatar
    2 posts
    Member since:
    Apr 2015

    Posted 23 Feb Link to this post

    ScrollHeight=""

     

    <ClientSettings>

    <Scrolling AllowScroll="True" ScrollHeight="" UseStaticHeaders="True" SaveScrollPosition="true"></Scrolling>

    <ClientSettings>

     

  19. Eyup
    Admin
    Eyup avatar
    3013 posts

    Posted 26 Feb Link to this post

    Hi,

    Could you elaborate on what exactly you want to achieve? Generally, you can check our live samples:
    http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/scrolling/scrolling/defaultcs.aspx

    Regards,
    Eyup
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  20. bryan
    bryan avatar
    1 posts
    Member since:
    Feb 2016

    Posted 29 Sep in reply to Headache Link to this post

    Headache...your solution worked perfectly.  Set Scrollheight =""  thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017