Gridview Loading issue

Question

Hello,

I am binding gridview on page load, it has many records, so it takes so much time to load data. How to load it faster, also, it has pagination to it.

Maybe "Load More" option would work, but how to manage it with Pagination and what need to change in coding part.

Thanks in advance !

Answer 1

I am using Oracle databse

Answer 2

Hi Sushant Torankar,

To improve the loading speed of your GridView while maintaining pagination, consider implementing asynchronous data loading techniques. Instead of binding all records at once, you can load a subset of data initially and then fetch additional records as needed.

Here’s a basic approach using the "Load More" functionality:

1. Initial Load: Load a limited number of records on the initial page load.
2. Load More Button: Add a button that, when clicked, fetches the next set of records.
3. AJAX Call: Use AJAX to call a server-side method that retrieves the next batch of records without refreshing the page.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindGrid(0, 10); // Load first 10 records
    }
}

private void BindGrid(int startIndex, int pageSize)
{
    // Fetch data from the database
    var data = GetData(startIndex, pageSize);
    GridView1.DataSource = data;
    GridView1.DataBind();
}

// AJAX method to load more records
[WebMethod]
public static List<YourDataType> LoadMore(int startIndex, int pageSize)
{
    return GetData(startIndex, pageSize);
}

Performance Improvement Tips

• Ensure your database queries are optimized for performance.
• Implement caching strategies if applicable.
• Monitor the user experience to ensure the "Load More" functionality is intuitive.

Answer 3

To implement a "Load More" functionality for your GridView in C#, modify your data query to load a subset of records using SQL's OFFSET and FETCH NEXT or ROW_NUMBER() for pagination. In your C# backend, create a method to fetch paginated data based on the current page number and page size, and bind the first page of data on page load. Add a "Load More" button below the GridView, and in its Click event, fetch the next set of records, append them to the existing GridView data, and update the page number in the ViewState. This approach reduces the initial load time and progressively loads more data when the user clicks "Load More."
It worked for here essaybucket.com for a project, hope it will work for you as well.

Answer 4

 To Load More records in GridView with pagination try this,

ASP.NET

<asp:GridView ID="GridView1" runat="server" ...>
</asp:GridView>
<button id="loadMore" onclick="loadMore()">Load More</button>

 AJAX call

let currentPage = 1; \/\/ Initialize current page

function loadMore() {
    currentPage++;
    $.ajax({
        url: 'YourPage.aspx\/GetData', \/\/ Update with your page and method
        type: 'POST',
        contentType: 'application\/json; charset=utf-8',
        data: JSON.stringify({ page: currentPage }),
        success: function (data) {
            \/\/ Append new records to the GridView or update your GridView
            $('#GridView1').append(data.d);
        },
        error: function (error) {
            console.error(\"Error loading more data:\", error);
        }
    });
}

Server side c#

[WebMethod]
public static List<YourDataType> GetData(int page) {
    int pageSize = 10;  
    using (SqlConnection conn = new SqlConnection("YourConnectionString")) {
        conn.Open();
        SqlCommand cmd = new SqlCommand("SELECT * FROM YourTable ORDER BY YourColumn OFFSET @Offset ROWS FETCH NEXT @PageSize ROWS ONLY", conn);
        cmd.Parameters.AddWithValue("@Offset", (page - 1) * pageSize);
        cmd.Parameters.AddWithValue("@PageSize", pageSize);
        
        SqlDataReader reader = cmd.ExecuteReader();
        List<YourDataType> dataList = new List<YourDataType>();
        
        while (reader.Read()) {            
            YourDataType data = new YourDataType {               
            };
            dataList.Add(data);
        }
        return dataList;
    }
}