Endless Scroll (Infinite Scroll) in ASP.Net ASPXGridView using jQuery AJAX

Question

im wondering is there any way of implementing endless scrolling on a ASPXGridview. I have seen something like this (http://demos.devexpress.com/aspxgridviewdemos/PagingAndScrolling/EndlessPaging.aspx) but this doesnt work because i have an old version of DevExpress.

My grid contains a lot of data so i dont want it to be loaded all at once.

So can this be done using JQuery?

This is my code for populating my Results grid:

    public List<main_screenHelper> GetDedicatedRouteList(string SwitchCd, int AccId, int BndId, int CarrId, int SttId, int StatusId, int Req_id)
    {
        SqlConnection con = ConnectionFactory.GetDedicatedRoutesConnection();
        SqlCommand cmd = new SqlCommand("GetDedicatedRoutesList", con);
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@SwitchCd", SwitchCd);
        cmd.Parameters.AddWithValue("@AccId", AccId);
        cmd.Parameters.AddWithValue("@BndId", BndId);
        cmd.Parameters.AddWithValue("@CarrId", CarrId);
        cmd.Parameters.AddWithValue("@SttId", SttId);
        cmd.Parameters.AddWithValue("@StatusId", StatusId);
        cmd.Parameters.AddWithValue("@Req_id", Req_id);
        List<main_screenHelper> dedicatedRoutList = new List<main_screenHelper>();
        try
        {
            con.Open();
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                main_screenHelper drList = new main_screenHelper();
                drList.dr_id = Int32.Parse(dr["dr_id"].ToString());
                drList.switch_code = (dr["switch_code"].ToString());
                drList.cus_company_name = (dr["cus_company_name"].ToString());
                drList.carrier = (dr["Carrier"].ToString());
                drList.dr_percentage = Int32.Parse(dr["dr_percentage"].ToString());
                drList.dr_overflow = (dr["dr_overflow"].ToString());
                drList.bnd_name = (dr["bnd_name"].ToString());
                drList.RoutingCase = (dr["RoutingCase"].ToString());
                drList.peak = Convert.ToBoolean(dr["peak"]);
                drList.off_peak = Convert.ToBoolean(dr["off_peak"]);
                drList.weekend = Convert.ToBoolean(dr["weekend"]);
                drList.active_date = Convert.ToDateTime(dr["active_date"]);
                drList.stt_name = (dr["stt_name"].ToString());
                drList.stt_display_order = Int32.Parse(dr["stt_display_order"].ToString());
                drList.opportunity = Convert.ToBoolean(dr["opportunity"]);
                drList.Lock = Convert.ToBoolean(dr["lock"]);
                drList.comments = (dr["comments"].ToString());
                drList.lcr_name = (dr["lcr_name"].ToString());
                dedicatedRoutList.Add(drList);
            }
        }
        finally
        {
            con.Close();
            con = null;
            cmd = null;
        }
        return dedicatedRoutList;
    }
}

This is my ASP code for the grid:

<dxwgv:ASPxGridView ID="dgrdResults" runat="server" AutoGenerateColumns="False" 
                DataSourceID="DedicatedRouteDataSource" Width="100%" 
                onhtmlrowcreated="dgrdResults_HtmlRowCreated">
                <Columns>
                    <dxwgv:GridViewDataTextColumn Caption="Switch" FieldName="switch_code" 
                        VisibleIndex="0" Width="30px">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="LCR" FieldName="lcr_name" 
                        VisibleIndex="1">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="Customer" FieldName="cus_company_name" 
                        VisibleIndex="2" Width="150px">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="Vendor" FieldName="carrier" 
                        VisibleIndex="3">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="Ratio" 
                        VisibleIndex="4">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="Overflow" 
                        VisibleIndex="5">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="Destination" FieldName="bnd_name" 
                        VisibleIndex="6">                                                  
                    <DataItemTemplate>
                        <dxe:ASPxHyperLink ID="DestinationLink" runat="server" Text='<%#Eval("bnd_name") %>' ClientInstanceName="DestinationLink" Font-Size="11px">
                        </dxe:ASPxHyperLink>                                         
                    </DataItemTemplate>                      
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="Peak" FieldName="peak" 
                        VisibleIndex="7">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="O/Peak" FieldName="off_peak" 
                        VisibleIndex="8">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="W/End" FieldName="weekend" 
                        VisibleIndex="9">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="Created" FieldName="active_date" 
                        VisibleIndex="10">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="Status" FieldName="stt_display_order" 
                        VisibleIndex="11">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="Special" VisibleIndex="12">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="Comments" FieldName="comments" 
                        VisibleIndex="13">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="Edit" VisibleIndex="14">
                    </dxwgv:GridViewDataTextColumn>
                </Columns>                                             
            </dxwgv:ASPxGridView>

score 1 · Accepted Answer · edited May 23 '17 at 11:49

I don’t have an complete answer, but can hopefully send you in the right direction.

I think the you can imitate the behavior of the endless scrolling by using the DevExpress GridView in combination with jQuery, but it will take some effort. You can define a scrollable div with your GridView in it and let jQuery detect if you scrolled near the bottom. See: Check if a user has scrolled to the bottom

If the jQuery event fires you could do a custom callback on the ASPxGridView, do a select of a couple of extra rows and bind them to your grid.

Upgrading the DevExpress license or using default paging is probably much easier :)

Endless Scroll (Infinite Scroll) in ASP.Net ASPXGridView using jQuery AJAX

1 Answers1