Only Horizontal Scrollbar for RadGrid

[kachy]

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

[Pavlina]

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.

[kachy]

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.

[Pavlina]

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.

[kachy]

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.

[Pavlina]

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.

[kachy]

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.

[Pavlina]

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.

[santhosh]

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!

[Stephen]

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.)

[Sebastian]

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

[Stephen]

Thanks for the fast reply.

Works well.

:-)

[Zachary]

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

[Antonio]

@Zachary Brilliant!, this solve for me too!

[Alex]

@Zachary It doesn't work in IE7. :(

[Megha]

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>

[Headache]

ScrollHeight=""

 

<ClientSettings>

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

<ClientSettings>

 

[Eyup]

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

[bryan]

Headache...your solution worked perfectly.  Set Scrollheight =""  thanks!