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

Only Horizontal Scrollbar for RadGrid

18 Answers 1230 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
kachy
Top achievements
Rank 1
kachy asked on 11 Jun 2009, 06:07 AM
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

18 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 11 Jun 2009, 08:10 AM
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.
0
kachy
Top achievements
Rank 1
answered on 11 Jun 2009, 01:42 PM
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.
0
Pavlina
Telerik team
answered on 11 Jun 2009, 04:47 PM
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.
0
kachy
Top achievements
Rank 1
answered on 12 Jun 2009, 06:48 PM
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.
0
Pavlina
Telerik team
answered on 16 Jun 2009, 03:25 PM
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.
0
kachy
Top achievements
Rank 1
answered on 23 Jun 2009, 06:30 PM
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.
0
Pavlina
Telerik team
answered on 25 Jun 2009, 03:24 PM
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.
0
santhosh
Top achievements
Rank 1
answered on 09 Aug 2010, 10:04 PM
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!
0
Stephen
Top achievements
Rank 1
answered on 29 Sep 2011, 09:46 AM
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.)
0
Sebastian
Telerik team
answered on 29 Sep 2011, 09:52 AM
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
0
Stephen
Top achievements
Rank 1
answered on 29 Sep 2011, 09:55 AM
Thanks for the fast reply.

Works well.

:-)
0
Zachary
Top achievements
Rank 1
answered on 16 Aug 2012, 11:20 AM
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;
}

0
Antonio
Top achievements
Rank 1
answered on 15 Oct 2012, 01:32 PM
@Zachary Brilliant!, this solve for me too!
0
Alex
Top achievements
Rank 1
answered on 09 Nov 2012, 02:07 PM
@Zachary It doesn't work in IE7. :(
0
Megha
Top achievements
Rank 1
answered on 03 Jan 2013, 05:16 PM

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>
0
Headache
Top achievements
Rank 1
answered on 23 Feb 2016, 09:33 AM

ScrollHeight=""

 

<ClientSettings>

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

<ClientSettings>

 

0
Eyup
Telerik team
answered on 26 Feb 2016, 08:49 AM
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
0
bryan
Top achievements
Rank 1
answered on 29 Sep 2016, 09:18 PM
Headache...your solution worked perfectly.  Set Scrollheight =""  thanks!
Tags
Ajax
Asked by
kachy
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
kachy
Top achievements
Rank 1
santhosh
Top achievements
Rank 1
Stephen
Top achievements
Rank 1
Sebastian
Telerik team
Zachary
Top achievements
Rank 1
Antonio
Top achievements
Rank 1
Alex
Top achievements
Rank 1
Megha
Top achievements
Rank 1
Headache
Top achievements
Rank 1
Eyup
Telerik team
bryan
Top achievements
Rank 1
Share this question
or