[DEVEXPRESS] Hướng dẫn custome popup filter date range trong Gridview

Bài viết hôm nay, mình sẽ hướng dẫn các bạn cách custom filter date range (từ ngày đến ngày) trong gridview của Devexpress.

Mình ví dụ, trong GridView của các bạn có ô ngày tháng, và bạn muốn filter từ ngày đến ngày trong Gridview.

Mặc định, Gridview chỉ cho phép chúng ta filter trong ngày, nên muốn chọn từ ngày đến ngày các bạn cần phải custom Gridview của Devexpress lại.

Dưới đây là giao diện filter trên ô ngày tháng, khi chưa custom.

Và giao diện, dưới đây là sau khi chúng ta đã custom lại có thêm ô Is Between (Bạn có thể chọn từ ngày đến ngày để filter dữ liệu trên gridview)

Source code C#:

using DateRange;
using DevExpress.XtraEditors.Repository;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace RangeFilterGridView
{
    public partial class Form1 : DevExpress.XtraEditors.XtraForm
    {
        public Form1()
        {
            InitializeComponent();
        }
        RepositoryItemDateEdit riDateEdit = new RepositoryItemDateEdit();
        private void Form1_Load(object sender, EventArgs e)
        {
            DataTable dataTable = new DataTable();
            dataTable.Columns.Add("Ngày", typeof(DateTime));
            dataTable.Columns.Add("Data", typeof(string));
            int days = DateTime.DaysInMonth(2018, 07);
            for (int day = 1; day <= days; day++)
            {
                DateTime ngay = new DateTime(2018, 07, day);
                dataTable.Rows.Add(ngay, $"Ngày {day}");
            }


            myGridControl1.DataSource = dataTable;

            myGridView1.Columns["Ngày"].ColumnEdit = riDateEdit;
            myGridView1.Columns["Ngày"].OptionsFilter.FilterPopupMode = FilterPopupModeExtended.DateRange;
            myGridView1.Columns["Ngày"].OptionsFilter.UseFilterPopupRangeDateMode = true;
            myGridView1.OptionsFilter.ColumnFilterPopupMode = DevExpress.XtraGrid.Columns.ColumnFilterPopupMode.Classic;
        }
    }
}

Demo ứng dụng filter:

Để custome Gridview, các bạn có thể download component ở source code bên dưới nhé

Download

HAPPY CODING