Hướng dẫn sử dụng Layout View trong Gridcontrol Devexpress.

Hôm nay, mình hướng dẫn các bạn sử dụng Layout View để hiển thị danh sách sinh viên trong Grid control của Devexpress. Theo như mình biết, thì bộ công cụ Grid Control của Devexpress chỉ hiện thị được hình ảnh, khi các bạn lưu hình ảnh vào cơ sở dữ liệu.

Nhưng mà lưu hình ảnh vào cơ sở dữ liệu, sẽ làm cho database mình lớn thêm, tốc độ truy xuất chậm hơn, nên hôm nay mình hướng dẫn các bạn hiển thị hình ảnh, từ hình ảnh trong thư mục ổ đĩa của các bạn lên Form.

Để Grid control đọc được hình ảnh từ link, các bạn cần chép 3 file mình đã code sẵn vào project.

- Tạo 1 component: GraphicsEdit.vb

- Tạo 1 Componet: RepositoryItemGraphicsEdit.vb

- Tạo 1 Class: GraphicsEditViewInfo.vb.

3 file trên các bạn có thể lấy từ source code của mình, tích hợp trong bài viết nha các bạn.

- Mặc định hình ảnh hiển thị lên có độ cao rất nhỏ, vì vậy cần chỉ chỉnh thuộc tính AutoRowHeight = True nha các bạn.

Các bạn có thể tham khảo video mình hướng dẫn bên dưới:

Đây là code form chính:

- Đầu tiên các bạn cần Import thư viện vào:

Imports System.Data.SqlClient

- Tiếp đến mình viết hàm tạo kết nối database:

Dim con As New SqlConnection
Public Sub Taoketnoi()
            Dim str As String = "Data Source=.;Initial Catalog=Student;Integrated Security=True"
            con.ConnectionString = str
            con.Open()
        End Sub
        Public Function LayDulieu() As DataTable

            Dim dt As New DataTable
            Dim da As New SqlDataAdapter
            da.SelectCommand = New SqlCommand("select Cast('C:/Users/nguye/Desktop/GraphicsEditor/GraphicsEditor/bin/Debug/hinhanh/' + hinhanh as nvarchar(4000)) as [Hình ảnh],masv as [Mã sinh viên], tensv as [Tên sinh viên] from test", con)
            da.Fill(dt)
            Return dt
End Function

- Hàm Sql trên mình add thêm đường dẫn thư mục hình ảnh để đọc hình, mặc định lưu hinhanh chỉ có tên: 1.jpg, vì vậy, mình cần nối thêm đường dẫn tuyệt đối để grid control có thể đọc được hình ảnh.

- Viết sự kiện cho nút Form_load

 Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            Taoketnoi()
            Dim dt As New DataTable
            dt = LayDulieu()
            GridControl1.DataSource = dt
            Dim repItemGraphicsEdit As New RepositoryItemGraphicsEdit()
            repItemGraphicsEdit.SizeMode = DevExpress.XtraEditors.Controls.PictureSizeMode.Squeeze
            repItemGraphicsEdit.BestFitWidth = 100
            LayoutView1.Columns("Hình ảnh").ColumnEdit = repItemGraphicsEdit
 End Sub

Vậy là xong! bây giờ các bạn hãy nhấn F5 để thưởng thức thành quả.

Cám ơn các bạn đã xem bài viết. Hãy like and share giúp mình nha các bạn.

Các bạn có thể Đăng ký kênh Youtube của mình ở góc phải bên trên màn hình.

Mọi thắc mắc về bài viết các bạn có thể hỏi ở http://hoidap.laptrinhvb.net để được support. 

Download source code