[C#] DevExpress - Thay đổi màu ô trên lưới khi thay đổi giá trị

GridView trong DevExpress hỗ trợ cho chúng ta rất nhiều phương thức cũng như thuộc tính sẵn có để có thể giải quyết gần như toàn bộ các tác vụ cần có trên một lưới thông tin. Hôm nay LaptrinhVB sẽ làm mộ ví dụ nhỏ về cách thay đổi giá trị màu sắc của ô trên lưới khi ta thay đổi dữ liệu của ô đó.

Change the color of GridView cell when update cell value

Với một lưới có lượng lớn dữ liệu, việc người dùng cập nhật trên lưới có thể sẽ gặp một số vấn đề như lỡ tay chỉnh sửa một giá trị của một ô nhưng lại quên mất vị trí của ô đó trên lưới. Do đó, bài viết này sẽ hướng dẫn các bạn bắt sự kiện khi thay đổi giá trị của ô và GirdView của DevExpress sẽ đổi màu ô đó, giúp người dùng có cái nhìn tổng quan về công việc update dữ liệu trên lưới của mình, nhằm chính xác việc cập nhật.

Tạo một Project mới.

Tạo một form1 mới với gridview dùng để chứa dữ liệu, một button để thực hiện nạp dữ liệu cho lưới, thêm hành hoa lá hẹ cho đúng khẩu vị của mình. Bắt đầu code, nhấn F7.

Đầu tiên cần tạo dữ liệu để test thử, có thể sử dụng lấy dữ liệu từ database SQL để thay thế. 

void LoadDataToGrid()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("ID", typeof(int));
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("From", typeof(string));
            dt.Columns.Add("Level", typeof(string));

            dt.Rows.Add(1, "Thảo Meo", "Vũng Áng á lộn Vũng Tàu", "Sensor DEV hàng Tàu");
            dt.Rows.Add(2, "TONA Dinh", "Quảng Bọ", "DEV mầm non");
            dt.Rows.Add(3, "Hoàng Tử Nhỏ", "Dầu giây City", "Sensor DEV hàng Việt");
            dt.Rows.Add(4, "Mr.Cùi Bắp", "Chắc chắn là Vũng Tàu", "Sensor DEV hàng Thái");

            gridControl1.DataSource = dt;
            
        }

Như vậy là đã có dữ liệu test thử, tiếp tục, new một class trong project và đặt tên nó là của nợ GridViewEdit.cs. Class này sẽ thực hiện nhiệm vụ cải tạo cái gridview mình đã thêm ở trên. Code như sau:

public class GridViewEdit
    {

        GridView grid;// dùng cái này để hứng khi mình ném cái gridview vào
        public GridViewEdit(GridView grid)//hàm dựng
        {
            this.grid = grid;
            cells = new List();
            grid.CellValueChanged += gridView_CellValueChanged; //gắn event bắt cái thay đổi dữ liệu cho grid
            grid.RowCellStyle += gridView1_RowCellStyle; //cái này dùng để thay đổi giá trị backgroud của ô
        }


        #region "Thay đôi màu sắc khi chỉnh sửa giá trị ô"
        List cells;//lưu các ô được thay đổi dữ liệu

        public GridView Grid //k bt phải nói gì
        {
            get
            {
                return grid;
            }

            set
            {
                grid = value;
            }
        }

        public void gridView_CellValueChanged(object sender, DevExpress.XtraGrid.Views.Base.CellValueChangedEventArgs e) 
        {
            string key = e.Column.FieldName + ";" + e.RowHandle.ToString();//cặp khóa lưu thông tin của ô gồm fieldname và rowhandle khi ô đó đc update value
            if (!cells.Contains(key))
                cells.Add(key); //thêm khóa vào 
        }

        public void gridView1_RowCellStyle(object sender, DevExpress.XtraGrid.Views.Grid.RowCellStyleEventArgs e)
        {
            GridView view = sender as GridView;
            string key = e.Column.FieldName + ";" + e.RowHandle.ToString();//bắt lấy cái ô đang thực hiện update
            if (cells.Contains(key))//nếu ô này có sửa data thì nó sẽ nằm trong cái biến mình lưu ở trên
                e.Appearance.BackColor = Color.Aquamarine; //sửa nền ô
            else
                e.Appearance.BackColor = Color.White; //đưa màu nền về mặc định hoặc khỏi dùng cái này cũng được, tùy mục đích
        }
        #endregion

    }

Trong class này sẽ gồm hàm CellValueChanged dùng để bắt lấy ô được thay đổi giá trị, và hàm RowCellStyle dùng để thay đổi màu của ô. Lưu ý là class này phải để public: public class GridViewEdit. Như vậy là hoàn tất việc thiết lập cho một gridview bắt được sự kiện khi thay đổi giá trị dữ liệu và sửa luôn màu nền. 

Quay lại với form1, thực hiện gắn gridview vào class để class thực hiện nhiệm vụ của nó. Trong hàm khởi tạo của form:

public Form1()
        {
            InitializeComponent();
            LoadDataToGrid();//Hàm tải dữ liệu mình tạo ban đầu
            GridViewEdit grid = new GridViewEdit(gridView1); //ném gridview cho class GridViewEdit 
        }

Hoàn tất, demo của chương trình

HAPPY CODING ! ^^

SOURCE CODE