[GridDevExpress] Demo GridControl của DevExpress 14.2 (phần 1)

[GridDevExpress] Demo GridControl của DevExpress phần 1

Hôm nay mình viết bài này để lưu lại kiến thức của mình cũng đồng thời để share cho các bạn biết cách sử dụng Gridcontrol của DevExpress vì theo mình cảm thấy đây là 1 Control quan trọng để làm việc với CSQL và nó cũng hỗ trợ tìm kiếm nhanh rất tiện. Bài viết này có thể dài nên chắc mình sẽ chia làm 2 phần ở phần này mình chỉ các bạn lấy dữ liệu trong SQL ra đổ vào Grid và xuất ra theo dạng Bảng và Layout. Ở phần 2 thì mình sẽ chỉ các bạn tùy biến cái Grid để xuất CSDL theo ý mình!

Ở đây mình dùng VS 2013 và bản DevExpress 14.2.7

---

Đầu tiên các bạn mở VS và new project

New project

ở bước kế tiếp các chọn 1 trong  các dạng Template của DevExpress (có time thì các bạn cứ thử chọn tất cả xem nó như thế nào và mình cũng có thể xóa bỏ chỉnh sửa lại các Template và lưu lại để sử dụng cho những project sau). Ở đây mình chọn dạng Ribbon Bassed Application nha

chọn project

Các bạn nhấn Create Project

tạo from

Bây giờ các mở thanh toolbox của VS và kéo thả GridControl vào form của mình!

toolbox Grid

create Grid

Vậy thôi ko có gì đặc biệt. Ở đây mình sử dụng thêm Control officeNavigationBar để chỉnh dạng hiển thị Grid theo 2 dạng Bảng (gridView) hay dạng Card (layoutView)

tạo Control officeNavigationBar

Ở GridControl có tất cả là 7 kiểu hiển thị : CardView, GridView, BandedGridView, AdvBandedGridView, LayoutView, WinExloperView và TitleView. Ở đây mình giới thiệu các bạn 2 kiểu view chính là GridView và LayoutView.

Các bạn chọn –> Click here to change view –> sau đó chọn Create new view để tạo 2 view chính là GridView và LayoutView

OK giao diện chỉ như vậy là xong.

Bây giờ các bạn tạo 1 Class LinQ để liên kết CSDL và các bạn chỉ việc lấy xuất dữ liệu trong From_Load là ok:

Code:

DataClassesQuanLyDoanhNghiepDataContext csdl = new DataClassesQuanLyDoanhNghiepDataContext();

private void Form1_Load(object sender, EventArgs e)

{

gridControlNhanvien.DataSource = csdl.NhanViens.ToList();

}
Và nhấn F5 chạy sẽ thấy kết quả:

kết quả dạng Bảng

Và để thay đổi kiểu hiển thị của Grid các bạn sẽ gán lại kiểu hiển thị Mainview ở sự kiện SelectedItemChanged của officeNavigationBar vì ở đây mình dùng Control officeNavigationBar này các bạn có thể dùng button hay combobox hay các control khác mà các bạn cảm thấy phù hợp để thay đổi.

Code:

private void officeNavigationBarHienThi_SelectedItemChanged(object sender, DevExpress.XtraBars.Navigation.NavigationBarItemEventArgs e)

{

if (officeNavigationBarHienThi.SelectedItem == navigationBarItemBang)

{

gridControlNhanvien.MainView = gridView;

}

else if (officeNavigationBarHienThi.SelectedItem == navigationBarItemLayout)

{

gridControlNhanvien.MainView = layoutView;

}

}

Nhấn F5 và xem kết quả khi hiển thị ở dạng LayoutView:

kết quả ở dạn Layout one card

Ở dạng Layout sẽ xuất hiện thêm thanh công cụ cho phép xem 6 dạng Layout khác nhau là: OneCard, OneRow, OneColumn, Mutiple Rows, Mutiple Columns, Carousel Model (thích dạng này nà)

Kết quả ở dạng Carousel Model

Ok kết thúc phần 1 phần sang 2 mình sẽ chỉ các bạn tùy biến 1 chút về Grid mà mình biết được!

Link tải Demo:

http://www.mediafire.com/download/mmsf166vrg3y3ni/DemoGirdControlDev.rar