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

No Scrollbar for Virtual Scrolling

2 Answers 41 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Aash
Top achievements
Rank 1
Aash asked on 21 May 2012, 12:44 PM

Hi,

I've built a grid which uses Virtual Scrolling and has been set up with a page size of 8. I've noticed that intermittently that the vertical scrollbar was not appearing. During my investigation I discovered that if the VirtualItemCount is 32, the Scrollbar disappears and if I increase the VirtualItemCount to 33, the vertical scrollbar will happily appear.

Can you please provide a solution to this issue?

Thanks,

Aash.

2 Answers, 1 is accepted

Sort by
0
Aash
Top achievements
Rank 1
answered on 21 May 2012, 03:51 PM
Hi,

I have attached a sample code in regards to the above behavior:

Imports Telerik.Web.UI
  
Partial Class _Default
    Inherits System.Web.UI.Page
  
    Private Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
  
        Dim count As Integer = 0
        Dim sheetsData As New List(Of SheetsRow)
        Dim rnd As New Random
  
        While count < 8
  
            sheetsData.Add(New SheetsRow With {.Id = rnd.Next, .GuidString = Guid.NewGuid.ToString})
  
            count = count + 1
  
        End While
  
        RadGrid1.DataSource = sheetsData
        RadGrid1.VirtualItemCount = 32
  
        RadGrid1.DataBind()
  
    End Sub
  
  
End Class
  
Public Class SheetsRow
  
    Public Property Id As Long
    Public Property GuidString As String
  
End Class

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="RadControlsWebApp1._Default" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        //Put your JavaScript code here.
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div>
        <telerik:RadGrid ID="RadGrid1" runat="server" PageSize="8" AllowPaging="True" AllowCustomPaging="True"
            Height="775px">
            <PagerStyle Mode="NumericPages" />
            <ClientSettings>
                <Scrolling AllowScroll="true" UseStaticHeaders="true" EnableVirtualScrollPaging="True"
                    SaveScrollPosition="true" />
            </ClientSettings>
            <MasterTableView ItemStyle-Height="80px" AlternatingItemStyle-Height="80px">
            </MasterTableView>
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>

Thanks,

Aash.
0
Pavlina
Telerik team
answered on 24 May 2012, 11:03 AM
Hi Aash,

To show the scrollbar in your case you should set ScrollHeight property of the grid instead of its Height property:
<telerik:RadGrid ID="RadGrid1" runat="server" PageSize="8" AllowPaging="True" AllowCustomPaging="True">
            <PagerStyle Mode="NumericPages" />
            <ClientSettings>
                <Scrolling AllowScroll="true" UseStaticHeaders="true" EnableVirtualScrollPaging="True" ScrollHeight="350px"
                    SaveScrollPosition="true" />
            </ClientSettings>
            <MasterTableView ItemStyle-Height="80px" AlternatingItemStyle-Height="80px">
            </MasterTableView>
        </telerik:RadGrid>

For more information about Height vs. ScrollHeight go through the help article below:
http://www.telerik.com/help/aspnet-ajax/grid-height-vs-scrollheight.html

Greetings,
Pavlina
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.
Tags
Grid
Asked by
Aash
Top achievements
Rank 1
Answers by
Aash
Top achievements
Rank 1
Pavlina
Telerik team
Share this question
or