Grid / Virtual Scrolling with Client-Side Binding

[Mujtaba]

I have used example of grid virtual scrolling with client-side binding from this website. My RadGrid is disappearing for sometime whenever I pull the scroll down but come back to normal in 1 or 2 secs. Rest of the behaviour is fine except my grid disappears to fetch the data.

Below is my aspx page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Secure/Secure.Master" AutoEventWireup="true"CodeBehind="~/App_code/CSCode/DueForDispose.aspx.cs" Inherits="CSAuctionUI.Units.DueForDispose" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true">
    </telerik:RadScriptManager>
  <telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server"></telerik:RadAjaxLoadingPanel>

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">
        //<![CDATA[

            function pageLoad(sender, args) {
                toggleLoadingPanel("<%= RadGrid1.ClientID %>", true);
            }

            function showLoadingPanel(sender, args) {
                toggleLoadingPanel(sender.get_id(), true);
            }

            function hideLoadingPanel(sender, args) {
                toggleLoadingPanel(sender.get_id(), false);
            }

            function toggleLoadingPanel(elementId, show) {
                var loadingPanel = $find("<%=LoadingPanel.ClientID %>");
                if (show) {
                    loadingPanel.show(elementId);
                }
                else {
                    loadingPanel.hide(elementId);
                }
            }

            function handleScrolling(sender, args) {
                //check if the items are scrolled to bottom and get additional items
                if (args.get_isOnBottom()) {
                    var master = sender.get_masterTableView();
                    if (master.get_pageSize() < master.get_virtualItemCount()) {
                        //changing page size causes automatic rebind
                        master.set_pageSize(master.get_pageSize() + 20);
                    }
                }
            }
            //]]>

        </script>

    </telerik:RadCodeBlock>


<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" PageSize="20"
        CellSpacing="0" GridLines="None" Skin="Office2007">
        <PagerStyle Visible="false" />
        <MasterTableView TableLayout="Fixed">
            <Columns>
                <telerik:GridBoundColumn DataField="Sno" />
                <telerik:GridBoundColumn DataField="Unit_gkey" />
                <telerik:GridBoundColumn DataField="Unit_nbr"  />
                <telerik:GridBoundColumn DataField="Pkey"/>
                <telerik:GridBoundColumn DataField="Last_notice_sent" DataFormatString="{0:d}" />
                <telerik:GridBoundColumn DataField="Last_notice_id_sent" />
                <telerik:GridBoundColumn DataField="Category"/>
                <telerik:GridBoundColumn DataField="Bl_nbr" />
                <telerik:GridBoundColumn DataField="Ib_carrier"/>
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <Scrolling AllowScroll="true" UseStaticHeaders="true"/>
            <ClientEvents
                OnScroll="handleScrolling"
                OnCommand="showLoadingPanel"
                OnDataBound="hideLoadingPanel" />
            <DataBinding Location="DueForDispose.aspx" SelectMethod="GetBl" SelectCountMethod="GetBlCount"
                StartRowIndexParameterName="startRowIndex" MaximumRowsParameterName="maxRows" />
        </ClientSettings>
    </telerik:RadGrid>



    <telerik:RadAjaxManager OnAjaxRequest="RadAjaxManager1_AjaxRequest" DefaultLoadingPanelID="LoadingPanel" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"
                        LoadingPanelID="LoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>



</asp:Content>

Below is my code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using Telerik.Web;
using System.Web.Services;
using Oracle.DataAccess.Client;
using PICT.Auction.DAL;
using System.Data;

namespace CSAuctionUI.Units
{
    public partial class DueForDispose : System.Web.UI.Page
    {


        protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
        {
            if (e.Argument == "Rebind")
            {
                RadGrid1.MasterTableView.SortExpressions.Clear();
                RadGrid1.MasterTableView.GroupByExpressions.Clear();
                Response.Redirect(@"~/Secure/CustomerSupport/Auction/Units/DueForDispose.aspx");

            }
        }


        [WebMethod]
        public static int GetBlCount()
        {
            return 200;
        }


        [WebMethod]
        public static IEnumerable<Unit> GetBl(int startRowIndex, int maxRows)
        {
            string select = @"SELECT * FROM ( SELECT ROW_NUMBER() OVER (ORDER BY PKEY) AS ROW_NUMBER, auc.UNIT_GKEY,U.ID UNIT_NBR, AUC.PKEY,

auc.LAST_NOTICE_SENT,AUC.LAST_NOTICE_ID_SENT ,DECODE(U.CATEGORY,'IMPRT','IMPORT') CATEGORY ,U.BL_NBR,U.IB_CARRIER FROM PACCS.CS_AUC_DES_UNITS

auc,PACCS.VUE_AUC_DES_UNITS U where AUC.UNIT_GKEY = U.GKEY and AUC.DISPOSE_STATE ='DUE' and U.BL_NBR is not null ) foo WHERE ROW_NUMBER > :StartIndex AND

ROW_NUMBER <= :EndIndex";

            Dictionary<string, object> parameters = new Dictionary<string, object>();
            parameters["StartIndex"] = Math.Max(startRowIndex, 0);
            parameters["EndIndex"] = Math.Max(startRowIndex + maxRows, maxRows);
            DBCommand cmd = new DBCommand();

            DataTable data = ExecuteSelect(select, parameters, cmd.ConnSettings.ConnectionString);

            foreach (DataRow row in data.Rows)
            {
                Unit u = new Unit();
                u.Sno = long.Parse(row["ROW_NUMBER"].ToString());
                u.Unit_gkey =long.Parse(row["UNIT_GKEY"].ToString()) ;
                u.Unit_nbr = row["UNIT_NBR"].ToString();
                u.Pkey = long.Parse(row["PKEY"].ToString());
                if(!string.IsNullOrEmpty(row["LAST_NOTICE_SENT"].ToString()))
                u.Last_notice_sent = DateTime.Parse(row["LAST_NOTICE_SENT"].ToString());
                u.Last_notice_id_sent = row["LAST_NOTICE_ID_SENT"].ToString();
                u.Category = row["CATEGORY"].ToString();
                u.Bl_nbr = row["BL_NBR"].ToString();
                u.Ib_carrier = row["IB_CARRIER"].ToString();
                yield return u;
            }
        }

        private static  DataTable ExecuteSelect(string selectCommand, Dictionary<string, object> parameters, string connectionString)
        {
            OracleConnection MyOraConnection = new OracleConnection(connectionString);
            OracleDataAdapter MyOraDataAdapter = new OracleDataAdapter();

            MyOraDataAdapter.SelectCommand = new OracleCommand(selectCommand, MyOraConnection);

            foreach (KeyValuePair<string, object> pair in parameters)
            {
                MyOraDataAdapter.SelectCommand.Parameters.Add(new OracleParameter(pair.Key, pair.Value));
            }

            DataTable data = new DataTable();
            MyOraConnection.Open();

            try
            {
                MyOraDataAdapter.Fill(data);
            }

            finally
            {
                MyOraConnection.Close();
            }

            return data;
        }
    public class Unit
    {
        private long sno;
        private long unit_gkey;
        private string unit_nbr ;
        private long pkey ;
        private DateTime last_notice_sent ;
        private string last_notice_id_sent ;
        private  string category ;
        private string bl_nbr ;
        private string ib_carrier;

        public long Sno
        {
            get { return sno; }
            set { sno = value; }
        }
        public long Unit_gkey
        {
            get { return unit_gkey; }
            set { unit_gkey = value; }
        }
        public string Unit_nbr
        {
            get { return unit_nbr; }
            set { unit_nbr = value; }
        }
        public long Pkey
        {
            get { return pkey; }
            set { pkey = value; }
        }
        public DateTime Last_notice_sent
        {
            get { return last_notice_sent; }
            set { last_notice_sent = value; }
        }
        public string Last_notice_id_sent
        {
            get { return last_notice_id_sent; }
            set { last_notice_id_sent = value; }
        }
        public string Category
        {
            get {return category; }
            set { category = value; }
        }
        public string Bl_nbr
        {
            get {return bl_nbr; }
            set { bl_nbr = value; }
        }
        public string Ib_carrier
        {
            get { return ib_carrier; }
            set { ib_carrier = value; }
        }

    }

    }
}

Thanks for reading my question.

[Radoslav]

Hello Mujtaba,

Could you please try setting the Skin property of the RadAjaxLoadingPanel and let me know if the issue still persists. For example:

<telerik:RadAjaxLoadingPanel Skin="Office2007" ID="LoadingPanel" runat="server">
</telerik:RadAjaxLoadingPanel>

Looking forward for your reply.

Greetings,
Radoslav
the Telerik team