Display a DataGridView in a Popup

In this post, we will show you how to display the WinForms GridView in a Popup control. We will also use the new Metro Blue theme.

1. The first step is to drag and drop a new instance of the VIBlend DataGridView and the ControlBox control. The ControlBox control is a control similar to the WinForms ComboBox, but it can display any content in its Popup.
2. The next step is to initialize the Grid. We will add 5 rows and 5 columns and will populate it in unbound mode. The first column will display images in the grid cells. The rest of the columns will be traditional text columns.

   Create the Grid Rows and Columns.

   C#

   C#

   for (int i = 0; i < 5; i++)
   {
       Grid1.RowsHierarchy.Items.Add(i.ToString());
       Grid1.ColumnsHierarchy.Items.Add("Column " + i);
   }

   VB .NET

   VB.NET

   For i As Integer = 0 To 4
       Grid1.RowsHierarchy.Items.Add(i.ToString())
       Grid1.ColumnsHierarchy.Items.Add("Column " & i)
   Next i

   Fill the first grid column with images. In order to display an image in a grid cell, you need to do two things - set the cell's display settings to DisplaySettings.ImageOnly and call the SetCellImage method passing the cell's row, column and image index parameters.

   C#

   C#

   Grid1.ImageList = imageList1;<br />
   HierarchyItem columnImage = Grid1.ColumnsHierarchy.Items[0];
   for (int i = 0; i < Grid1.RowsHierarchy.Items.Count; i++)
   {
       HierarchyItem rowItem = Grid1.RowsHierarchy.Items[i];
       Grid1.CellsArea.SetCellDisplaySettings
           (rowItem, columnImage, DisplaySettings.ImageOnly);
       Grid1.CellsArea.SetCellImage(rowItem, columnImage, i);
   }

   VB.NET

   VB.NET

   Grid1.ImageList = imageList1
   Dim columnImage As HierarchyItem = Grid1.ColumnsHierarchy.Items(0)
   
   For i As Integer = 0 To Grid1.RowsHierarchy.Items.Count - 1
       Dim rowItem As HierarchyItem = Grid1.RowsHierarchy.Items(i)
       Grid1.CellsArea.SetCellDisplaySettings_
       (rowItem, columnImage, DisplaySettings.ImageOnly)
       Grid1.CellsArea.SetCellImage(rowItem, columnImage, i)
   Next i

   Fill the rest of the columns by using the SetCellValue method.

   C#

   C#

   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[0], 
       Grid1.ColumnsHierarchy.Items[1], "Porsche Boxster");
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[1], 
       Grid1.ColumnsHierarchy.Items[1], "Acura TL");
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[2], 
       Grid1.ColumnsHierarchy.Items[1], "Audi A4");
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[3], 
       Grid1.ColumnsHierarchy.Items[1], "BMW 645Ci");
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[4], 
       Grid1.ColumnsHierarchy.Items[1], "BMW 760Li");
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[0], 
       Grid1.ColumnsHierarchy.Items[2], true);
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[1], 
       Grid1.ColumnsHierarchy.Items[2], true);
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[2], 
       Grid1.ColumnsHierarchy.Items[2], true);
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[3], 
       Grid1.ColumnsHierarchy.Items[2], true);
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[4], 
       Grid1.ColumnsHierarchy.Items[2], true);
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[0], 
       Grid1.ColumnsHierarchy.Items[3], "4 years");
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[1], 
       Grid1.ColumnsHierarchy.Items[3], "4 years");
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[2], 
       Grid1.ColumnsHierarchy.Items[3], "4 years");
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[3], 
       Grid1.ColumnsHierarchy.Items[3], "4 years");
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[4], 
       Grid1.ColumnsHierarchy.Items[3], "4 years");
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[0], 
       Grid1.ColumnsHierarchy.Items[4], "www.porsche.com");
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[1], 
       Grid1.ColumnsHierarchy.Items[4], "www.acura.com");
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[2], 
       Grid1.ColumnsHierarchy.Items[4], "www.audi.com");
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[3], 
       Grid1.ColumnsHierarchy.Items[4], "www.bmw.com");
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[4], 
       Grid1.ColumnsHierarchy.Items[4], "www.bmw.com");

   VB.NET

   VB.NET

   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(0), _
       Grid1.ColumnsHierarchy.Items(1), "Porsche Boxster")< />
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(1), _
       Grid1.ColumnsHierarchy.Items(1), "Acura TL")
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(2), _
       Grid1.ColumnsHierarchy.Items(1), "Audi A4")
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(3), _
       Grid1.ColumnsHierarchy.Items(1), "BMW 645Ci")
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(4), _
       Grid1.ColumnsHierarchy.Items(1), "BMW 760Li")
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(0), _
       Grid1.ColumnsHierarchy.Items(2), True)
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(1), _
       Grid1.ColumnsHierarchy.Items(2), True)
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(2), _
       Grid1.ColumnsHierarchy.Items(2), True)
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(3), _
       Grid1.ColumnsHierarchy.Items(2), True)
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(4), _
       Grid1.ColumnsHierarchy.Items(2), True)
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(0), _
       Grid1.ColumnsHierarchy.Items(3), "4 years")
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(1), _
       Grid1.ColumnsHierarchy.Items(3), "4 years")
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(2), _
       Grid1.ColumnsHierarchy.Items(3), "4 years")
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(3), _
       Grid1.ColumnsHierarchy.Items(3), "4 years")
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(4), _
       Grid1.ColumnsHierarchy.Items(3), "4 years")
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(0), _
       Grid1.ColumnsHierarchy.Items(4), "www.porsche.com")
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(1), _
       Grid1.ColumnsHierarchy.Items(4), "www.acura.com")
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(2), _
       Grid1.ColumnsHierarchy.Items(4), "www.audi.com")
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(3), _
       Grid1.ColumnsHierarchy.Items(4), "www.bmw.com")
   Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(4), _
       Grid1.ColumnsHierarchy.Items(4), "www.bmw.com")

3. In order to display the Grid in the ControlBox's Popup, you need to set the ControlBox's ContentControl property to point to the Grid instance.

   C#

   C#

   this.vControlBox.ContentControl = this.Grid1;

   VB.NET

   VB.NET

   Me.vControlBox.ContentControl = Me.Grid1/pre>

CodeProject