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

RadGrid Virtual Scrolling Error

3 Answers 126 Views

Grid

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

Torrey asked on 31 Mar 2016, 09:01 PM

scrollinghangingillustration.png

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

RadGrid Virtual Scrolling Error

3 Answers, 1 is accepted