How to develop a VisualWebPart that loads list items on demand when scrolling the GridView, because I have a list with more than 10000 items and performance is key for this application.

Description: First when the GridView is loaded on the page, it comes with 30 items, then when the user is scrolling down the scrollbar, again 30 items have to be appended in the Gridview. This process should continue till the last item loads in the grid.

I know I can use paging for this problem but this solution was canceled as not the proper solution so instead I have to make it with scroll.

I also checked this site here but cannot solve my problem.

I am populating list items to GridView with the following code:

<div id="dvGrid" style="height: 500px; overflow: auto; width: 517px">
   <asp:GridView ID="gvCustomers" runat="server" CssClass="Grid">

   protected void Page_Load(object sender, EventArgs e)
        gvCustomers.DataSource = FetchList(30);

   private static DataSet FetchList(int pageIndex)
        using (DataSet ds = new DataSet())
            DataTable dt = new DataTable();
            dt.Columns.Add("Id", typeof(string));
            dt.Columns.Add("Name", typeof(string));
            SPList lista = SPContext.Current.Web.GetList("mysite/Lists/LageData");

            SPQuery query = new SPQuery();
            query.Query = @"<Where>
                                <FieldRef Name='Title' />
                                  <Value Type='Text'>JumpJet</Value>

            SPListItemCollection items = lista.GetItems(query);
            for (int i = 0; i < items.Count; i++)
                DataRow dr = dt.NewRow();
                dr["Id"] = items[i]["ID"].ToString();
                dr["Name"] = items[i]["Title"].ToString();

            return ds;

Please help me!

1 Answer 1


This is tricky and involves much client-side logic (i.e. JavaScript). I don't think there is an OOTB asp/SharePoint-control prepared for this.

The "normal" way to do this is to create a WebService that can provide the data "paged" (i.e. rows 1-50, then 51-100...) and a control that loads the data from this webService and populates the rows "on the fly". The trick is to check the position of the scrollbar - if it's at or near the bottom (i.e. the grid is scrolled down) then you'll load the next batch of rows...

If you need this feature you should consider checking existing controls. DataTables.net has this feature

  • Yes i am using DataTables.net but I am populating the grid with c# and I don't know how to implement it with scroll and with ajax Jul 13, 2017 at 9:30
  • I saw this homie Note that a DOM sourced table will see no performance benefits with Scroller since all elements are already present at the client-side. Jul 13, 2017 at 9:32
  • 1
    Is there any specific requirement for using C# code in this webpart, as you can achieve this functionality using JavaScript using JSOM object model. calling lazy loading similar to facebook
    – Sunil Sahu
    Jul 13, 2017 at 10:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.