[DEVEXPRESS] Hướng dẫn viết ứng dụng Infinite Scrolling trong GridView sử dụng VirtualServerModeSource

Nếu các bạn cần load dữ liệu hàng triệu record vào GridView, hôm nay mình sẽ hướng dẫn các bạn cách sử dụng Infinite Scrolling để load dữ liệu vào GridView C#.

Infinite Scrolling là gì?

Nó cũng giống như công nghệ Lazy loading trên các ứng dụng web hay điện thoại, nghĩa là chúng ta chỉ load dữ liệu cần thiết để hiển thị. khi chúng ta cuộn chuột đến đâu thì dữ liệu sẽ được tải thêm vào.

Để viết ứng dụng Infinite Scrolling chúng ta sẽ sử dụng VirtualServerModeSource, mới được Devexpress cập nhật từ phiên bản 18.1.

Vậy là để thực hiện được bài này, các bạn cần cài đặt phiên bản Devexpress từ 18.1 trờ lên nhé.

Dưới đây là giao diện demo của Devexpress:

- Ví dụ: các bạn cần load dữ liệu vào gridview là 10.000 record, và mặc định mỗi lần load dữ liệu là 500 record.

Vì vậy, mình cần phải viết lệnh truy vấn phân trang Sql từ record start đến record end. 

Các bạn có thể tham khảo thêm, cách phân trang dữ liệu sqlserver ở link này: Phân trang trong cơ sở dữ liệu SQL SERVER

Nếu các bạn sử dụng phiên bản sqlserver từ 2012 trở lên, có thể sử dụng từ khóa offset để phân trang theo link này: [SQLSERVER] Sử dụng từ khóa Offset và Fetch để phân trang trong sqlserver

Dưới đây, là giao diện demo ứng dụng sử dụng cơ sở dữ liệu sqlserver.

- Trên hình demo, các bạn thấy mỗi lần mình load dữ liệu là 200 record, khi scroll chuột xuống dưới, gần hết dữ liệu, chúng ta sẽ gọi truy vấn lấy dữ liệu tiếp theo.

Lấy đến khi nào số record cần lấy vượt số số total record, thì chúng ta dừng lại.

Đầu tiên, chúng ta cần lấy component VirtualServerModeSource từ toolbox vào project.

Source code Infinite Scrolling C#:

using DevExpress.Data;
using Ftp_Client;
using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WindowsFormsApp44
{
    public partial class Form1 : Form
    {
        int BatchSize = 50;
        int MaxRecordCount;
        sqlserver provider;
        public Form1()
        {
            InitializeComponent();
            provider = new sqlserver("127.0.0.1", "sa", "minh123", "sinhvien");
            MaxRecordCount = int.Parse(provider.ExecuteScalar("SELECT count(*) FROM dbo.TestTableSize where MyDate1 between '20180101' and '20180503'").ToString());
            //MaxRecordCount = 20000;
            lblTotal.Text = MaxRecordCount.ToString();

            string query = null;
            dt = GetDataFromStartToEnd(0, 0, ref query);
            txt_query.Text = query;

            virtualServerModeSource1.AcquireInnerList += VirtualServerModeSource1_AcquireInnerList;
            virtualServerModeSource1.MoreRows += VirtualServerModeSource1_MoreRows;
            gridControl1.DataSource = virtualServerModeSource1;

        }

        DataTable dt;

        public DataTable GetDataFromStartToEnd(int start, int end, ref string query_input)
        {
            string query = $@"SELECT * FROM( SELECT ROW_NUMBER() OVER(ORDER BY MyKeyField) AS stt, * FROM dbo.TestTableSize where MyDate1 between '20180101' and '20180503') dt
                                    WHERE stt BETWEEN {start} AND {end}";
            query_input = query;
            var data = provider.ExecuteQuery(query);
            return data;
        }

        private void VirtualServerModeSource1_MoreRows(object sender, DevExpress.Data.VirtualServerModeRowsEventArgs e)
        {
            e.RowsTask = System.Threading.Tasks.Task.Factory.StartNew(() =>
            {
                var nextBatch = dt.Clone();
                bool moreRows = true;
                int rowCount = e.CurrentRowCount;

                int next = dt.Rows.Count;

                if (next < MaxRecordCount)
                {
                    string query = null;
                    DataTable table_next = GetDataFromStartToEnd(next + 1, next + BatchSize, ref query);
                    nextBatch.Merge(table_next);
                    txt_query.BeginInvoke(new Action(() =>
                    {
                        txt_query.Text = string.Empty;
                        txt_query.Text = query;
                    }));
                }
                moreRows = rowCount < MaxRecordCount;
                return new VirtualServerModeRowsTaskResult(nextBatch.DefaultView, moreRows, null);
            }, e.CancellationToken);
        }

        private void VirtualServerModeSource1_AcquireInnerList(object sender, DevExpress.Data.VirtualServerModeAcquireInnerListEventArgs e)
        {
            e.InnerList = dt.DefaultView;
            e.AddMoreRowsFunc = MoreRows;
            e.ClearAndAddRowsFunc = ClearAndAddMoreRows;
            e.ReleaseAction = ReleaseList;
        }

        public void ReleaseList(IList list)
        {
            (list as DataView).Table.Rows.Clear();
        }
        public IList MoreRows(IList list, IEnumerable en)
        {
            var data = en as DataView;
            foreach (DataRow dr in data.Table.Rows)
                (list as DataView).Table.Rows.Add(dr.ItemArray);
            return list;
        }
        public IList ClearAndAddMoreRows(IList list, IEnumerable en)
        {
            var data = en as DataView;
            (list as DataView).Table.Rows.Clear();
            foreach (DataRow dr in data.Table.Rows)
                (list as DataView).Table.Rows.Add(dr.ItemArray);
            return list;
        }
    }
}

- Tuy nhiên, khi sử dụng VirtualServerModeSource, thì chúng ta sẽ không thể group dữ liệu, theo Devexpress thông báo.

Các bạn, có thể download full source code bên dưới để tham khảo nhé.

HAPPY CODING 

DOWNLOAD SOURCE