RadGrid Virtual Scrolling Error

4 posts, 0 answers
  1. Torrey
    Torrey avatar
    11 posts
    Member since:
    Jun 2015

    Posted 31 Mar 2016 Link to this post

    Hello guys,

    I have copied and pasted the example provided by the Telerik website almost verbatim - with exception to the implemented DataSource (which I'm doing programmatically for the sake of the example), and am getting problems. The website is here: Virtual Scrolling and Paging.

    The problems are as follows:

    • When I scroll to the bottom of the list, the AJAX request runs properly (seen during debugging), but the grid does not update with more records. Also, all other attempts to scroll cause the loading animation to appear and simply hang on the screen so that the page must be reloaded
    • After clicking on either of the heading columns to sort, it's successful the 1st time, but afterwards it hangs, nothing is clickable, and the page must be reloaded

    Please see the attached image 'ScrollingHangingIllustration.png'. Also, see below for the code. Please help!!

    ASP.NET Markup:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function HandleScrolling(e) {
                var grid = $find("<%=RadGrid1.ClientID %>");
              var scrollArea = document.getElementById("<%= RadGrid1.ClientID %>" + "_GridData");
              if (IsScrolledToBottom(scrollArea)) {
                  var currentlyDisplayedRecords = grid.get_masterTableView().get_pageSize() * (grid.get_masterTableView().get_currentPageIndex() + 1);
                  //if the visible items are less than the entire record count      
                  //trigger an ajax request to increase them   
                  if (currentlyDisplayedRecords < 100)
                  { $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadMoreRecords"); }
          }
      }
      //calculate when the scroll bar is at the bottom   
      function IsScrolledToBottom(scrollArea) {
          var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight;
          return currentPosition == scrollArea.scrollHeight;
      }
        </script>
      </telerik:RadCodeBlock>
      <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
          <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
              <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
          </telerik:AjaxSetting>
        </AjaxSettings>
      </telerik:RadAjaxManager>
      <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
        Width="75px" Transparency="25">
        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
          style="border: 0;" /></telerik:RadAjaxLoadingPanel>
     
      <telerik:RadGrid ID="RadGrid1" runat="server" Skin="Silk" AllowSorting="True" AllowPaging="True" PageSize="15" Width="97%" AutoGenerateColumns="False" GridLines="None">
        <PagerStyle Visible="False" />
        <MasterTableView Width="99%" TableLayout="Fixed" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst" PageSize="15">
            <SortExpressions>
                <telerik:GridSortExpression FieldName="CreateDate"
                                            SortOrder="Descending" />
            </SortExpressions>
            <Columns>
                <telerik:GridBoundColumn HeaderText="Code" DataField="ZipFileCode" UniqueName="ZipFileCode">
                    <HeaderStyle Width="90px" />
                </telerik:GridBoundColumn>
                                         
                <telerik:GridBoundColumn HeaderText="Description" DataField="ZipFileDesc" UniqueName="ZipFileDesc">
                </telerik:GridBoundColumn>
                                         
                <telerik:GridBoundColumn HeaderText="Select/Omit" DataField="ZipType" UniqueName="ZipType">
                    <HeaderStyle Width="100px" />
                </telerik:GridBoundColumn>
                                         
                <telerik:GridBoundColumn HeaderText="Create Date" DataField="CreateDate" UniqueName="CreateDate" DataType="System.DateTime" DataFormatString="{0:d}" ShowSortIcon="true">
                    <HeaderStyle Width="100px" />
                </telerik:GridBoundColumn>
     
                <telerik:GridBoundColumn HeaderText="Company" DataField="Company" UniqueName="Company">
                    <HeaderStyle Width="100px" />
                </telerik:GridBoundColumn>
            </Columns>                           
        </MasterTableView>
        <ClientSettings>
          <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="300px" />
          <ClientEvents OnScroll="HandleScrolling" />
        </ClientSettings>
      </telerik:RadGrid>

    VB Code-Behind:

    Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest
        RadGrid1.PageSize = 10 + RadGrid1.PageSize
        RadGrid1.Rebind()
    End Sub
     
    Public Function GetItemsTest(ByVal startRowIndex As Integer, ByVal maxRows As Integer) As DataSet
        Dim dt As DataTable = New DataTable("Sample")
        dt.Columns.Add("Company", System.Type.GetType("System.String"))
        dt.Columns.Add("ZipFileCode", System.Type.GetType("System.String"))
        dt.Columns.Add("ZipFileDesc", System.Type.GetType("System.String"))
        dt.Columns.Add("ZipType", System.Type.GetType("System.String"))
        dt.Columns.Add("CreateDate", System.Type.GetType("System.DateTime"))
        dt.Columns.Add("DeletedFile", System.Type.GetType("System.Boolean"))
        dt.Columns.Add("UploadedBy", System.Type.GetType("System.String"))
     
        Dim row As DataRow
        Dim dte As DateTime
        dte = DateTime.Now
     
        For i As Integer = 0 To maxRows
            row = dt.NewRow()
            row(0) = "Company" & i
            row(1) = "ZipFileCode" & i
            row(2) = "ZipFileDesc" & i
            row(3) = "ZipType" & i
            row(4) = dte
            row(5) = True
            row(6) = "UploadedBy" & i
            dt.Rows.Add(row)
        Next
     
        Dim ds As New DataSet("Sample")
        ds.Tables.Add(dt)
     
        Return ds
    End Function
     
    Private Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource
     
        RadGrid1.DataSource = GetItemsTest(0, RadGrid1.PageSize)
     
    End Sub

  2.
  3. Torrey
    Torrey avatar
    11 posts
    Member since:
    Jun 2015

    Posted 01 Apr 2016 in reply to Torrey Link to this post

    By the way: our current Telerik Web UI version is: 'UI for ASP.NET AJAX Q1 2016' (.NET version 3.5).
  5. Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 05 Apr 2016 Link to this post

    Hello Torrey,

    I would recommend you to use the virtualization feature of the grid where the data is automatically get when you reach the end of the scroll. You can examine the following help article for more details and also check out the following demo in order to see how it works.

    Regards,
    Kostadin
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. Torrey
    Torrey avatar
    11 posts
    Member since:
    Jun 2015

    Posted 05 Apr 2016 in reply to Kostadin Link to this post

    Hello Kostadin,

    Thank you for your reply.

    However, I see under Limitations 'Row/Cell Selection' listed. Row selection is a requirement for our web application. Does the limitation mean that you can no longer perform row selections when using Virtualization?

Back to Top