Monday, 8 April 2013

My Learnings with DataGridView in WinForms - Part 1


Introduction 


This is the first of the three posts on this topic. The Paint event is called when DataGridView needs repainting on account of changes to the grid. One of the requirements of a project was to display a No records available message when there are no records.  Rather than having checking record count each time records are fetched from database, its better to check condition only when grid is drawn. In this post I will explain how to use the Paint event to do this.

The following example illustrates how to use this event to customize the grid.

1.       Open Visual Studio and create a new Windows Forms project.

 

2.       Rename Form1 to Dashboard.



3.       Open Dashboard form in Designer mode.

4.       From Toolbox drag the following to the form:

a.       DataGridView control

b.      labelForEmptyRows .



 

5.       Click the arrow on DataGridView to define column header and column types. 



6.       In the Add columns window, set the column name, type(button column, text column etc.) and header text

 

 
7.       The final layout would be as seen in the following screenshot

 

8.       To populate the grid with some data, add the following code to the form.

public Dashboard()
        {
            InitializeComponent();  
            IList<CourseEntity> CourseList = PopulateGrid();
                   foreach(CourseEntity courseEntity in CourseList)
                dgvDashboard.Rows.Add(courseEntity.Id, courseEntity.CourseName,courseEntity.Status);     
        } 

        public IList<CourseEntity> PopulateGrid()
        {
            List<CourseEntity> courseList = new List<CourseEntity>();
            courseList.Add(new CourseEntity { Id = "1", CourseName = "Asp.NET MVC3", Status = "Available" });
           courseList.Add(new CourseEntity { Id = "2", CourseName = "Asp.NET MVC4", Status = "Available" });
    courseList.Add(new CourseEntity { Id = "3", CourseName = "C#", Status = "Available" });
    courseList.Add(new CourseEntity { Id = "4", CourseName = "Metro Apps", Status = "Available" });
            //return courseList.Cast<CourseEntity>().ToList();
            return courseList;
        }

       
               public class CourseEntity
 {
        public string Id { get; set; }
        public string CourseName { get; set; }
        public string Status { get; set; }
 }

 
9.       The expected output will be like this.



 
     10.       Oops!! No text on buttons? And why one extra row??
      11.       For providing text on buttons in Borrow Column. Go to edit columns in datagridview.
 
Set the properties as shown. 

12.       For removing this extra row at bottom, set “AllowUserToAddRows” property of datagridview to false.

13.       Now, comment out the code in Dashboard() so that no records are populated to grid.
public Dashboard()
        {
            InitializeComponent();    
            //IList<CourseEntity> CourseList = PopulateGrid();
            //foreach(CourseEntity courseEntity in CourseList)
            //    dgvDashboard.Rows.Add(courseEntity.Id, courseEntity.CourseName, courseEntity.Status);  
  }
14.       In the paint event of DataGridView add the following code.
 private void dgvDashboard_Paint(object sender, PaintEventArgs e)   {
          if (dgvDashboard.Rows.Count == 0)
                lblEmptyRows.Visible = true;
       else
            lblEmptyRows.Visible = false;
}
15.       See the output now.

Conclusion

 We learnt how we can leverage the Paint event of DataGridView, how to design a DataGridView view with different column types and AllowUserToAddRows Property.
In next part I will cover how to make images as buttons in DataGridView and define click events for them. Stay tuned J
 

No comments:

Post a Comment