Hide vertical bar on auto scroll

[Philip]

Hi,

I was following the sample project on this thread:

http://www.telerik.com/community/forums/aspnet/grid/how-to-auto-scroll-down-up-a-radgrid.aspx

But I was wondering if there is a way to completely hide the vertical scroll bar when it is auto-scrolling up and down. Thanks.

[Tsvetina]

Hi Philip,

This project is quite out-dated since it was made using the RadAjaxTimer control which is no longer a part of RadControls, so it may not be a good idea to use this control. You may consider implementing something similar with an asp Timer control and ajax requests.

As for your additional requirement, you can use overflow:hidden for the grid in order to prevent the scrollbars from showing and again use javascript to move the content down/up.

Regards,
Tsvetina
the Telerik team

[Philip]

The vertical bar still shows. Any other ideas? Here's the code:

 

 

 

 

<script type="text/javascript">

 

 

 

 

 

 

 

 

 

function ScrollDown() {

 

 

 

 

var grid = $find("<%=rgrd1.ClientID %>");

 

 

 

 

var scrollArea = document.getElementById("<%= rgrd1.ClientID %>" + "_GridData");

 

 

scrollArea.scrollTop += 12;

 

 

 

if (IsScrolledToBottom(scrollArea)) {

 

 

scrollArea.scrollTop = 0;

 

}
}

 

 

function IsScrolledToBottom(scrollArea) {

 

 

 

 

var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight;

 

 

 

 

return currentPosition == scrollArea.scrollHeight;

 

 

}

 

 

 

 

 

function MyTickHandler(eventArgument) {

 

 

ScrollDown();

 

 

 

 

return false;

 

 

}

 

 

 

 

 

 

</

 

 

 

script>

 

 

 

 

 

 

 

 

<

 

 

 

div id="RadGridDiv" style="overflow: hidden;">

 

 

 

 

 

 

 

 

 

 

 

<telerik:RadGrid ID="rgrd1" runat="server" Skin="Vista" Width="490px"

 

 

 

 

 

AllowPaging="False" GridLines="None" ShowStatusBar="true"

 

 

 

 

 

onitemdatabound="rgrd1_ItemDataBound">
...

 

 

 

 

<ClientSettings>

 

 

 

 

 

 

 

 

 

 

 

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

 

 

 

 

 

</ClientSettings>

 

 

 

 

 

 

 

 

 

 

 

</telerik:RadGrid>

 

 

 

 

 

</div>

 

 

 

 

 

 

[Tsvetina]

Hello Philip,

This happens because you enable scrolling for the grid control and I assume it is the one that shows a scrollbar. If you disable RadGrid scrolling, no scroll will be shown, part of the grid content will be hidden in case there is no space available for it, and you will be able to use only javascript for "scrolling" the control.

Is your requirement different from this?

All the best,
Tsvetina
the Telerik team

[Philip]

Still can't figure out a way to scroll down automatically on a time interval (like an airport dashboard) without following the code on the project you guys posted. Is there an updated version for it? (without using radajaxtimer). Also, previous project is using the radgrid's client GridDataDiv to do it. If I disable scrolling, I can't access that object anymore.. I get a null exception. Please let me know if there is another way through javascript to do this. Sample client code would be appreciated. Thanks.

[Tsvetina]

Hi Philip,

If you want functionality similar to an airport dashboard, I assume that a better approach would be to implement a grid similar to this one:
Ajaxify Timer

This is not a client solution, as there is an ajax callback but it refreshes only a grid. Please, take a look at it and if it does not suit your requirement, you can use the client setTimeout() and setInterval() methods to simulate the timer's tick.

As for an applicable client-side solution, you can put the grid inside a div with style = "overflow:hidden" and use one of the available solutions on the net to move the content of a <div> with overflow:hidden through javascript.

All the best,
Tsvetina
the Telerik team