Home Products Downloads Purchase Support Forum About Blog

Display a DataGridView in a Popup

by Admin 13. January 2012 22:48

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 columns will be traditional text columns.

- Create the Grid Rows and Columns:


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


For i As Integer = 0 To 4
    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.


Grid1.ImageList = imageList1;
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);

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.


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], "");
Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[1], Grid1.ColumnsHierarchy.Items[4], "");
Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[2], Grid1.ColumnsHierarchy.Items[4], "");
Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[3], Grid1.ColumnsHierarchy.Items[4], "");
Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items[4], Grid1.ColumnsHierarchy.Items[4], "");


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), "")
Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(1), Grid1.ColumnsHierarchy.Items(4), "")
Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(2), Grid1.ColumnsHierarchy.Items(4), "")
Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(3), Grid1.ColumnsHierarchy.Items(4), "")
Grid1.CellsArea.SetCellValue(Grid1.RowsHierarchy.Items(4), Grid1.ColumnsHierarchy.Items(4), "")

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.


this.vControlBox.ContentControl = this.Grid1;


Me.vControlBox.ContentControl = Me.Grid1


Improved filtering capabilities in the new VIBlend WPF DataGrid

by viblend 19. March 2011 22:47

The new release of VIBlend Controls for WPF is almost here and we wanted to share with you some additional details about it. One of the major changes in the new version will be the updated WPF
Filtering functionality. The DataGrid filtering window will be extended by providing an easier and user-friendly experience. The new filtering window will show a checked list box, allowing for single
and/or multiple selections. The previous filtering mechanism will still be available and you will be able to switch to it by clicking a single button. The Grouping Panel which is already available in our WinForms
and Silverlight grid controls is coming to the WPF DataGrid, too. This new feature allows you to drag a column header to the panel above the grid to group the data. You can also programmatically group data
by using intuitive API. Data can be grouped by single or multiple columns at the same time. It is needless to say that the API of our WPF and Silverlight Data Grid controls will still be fully compatible.


Highly optimized new version of VIBlend WPF DataGrid is almost here

by viblend 18. November 2010 23:44

The main focus of the upcoming major release is on the WPF DataGrid control. There are two main areas that were the target of improvement – performance and business-oriented features. The performance is improved in various scenarios including navigation, scrolling and data binding. You can easily create an excel-like spreadsheet with thousands of rows and columns or bind the DataGrid to large datasets. Some of the key new features will be the built-in Clipboard support, Localization Provider, enhanced Data Layer through binding to a DataTable and improved support for MVVM. 


If you have already worked with the VIBlend Silverlight and WinForms DataGrids, you will also benefit from the shared codebase between our DataGrid controls.

Another small improvement will be the new default theme: 

We sincerely hope that you'll like the new changes and we'll be glad to hear your feedback. If you have any questions regarding the new release, please feel free to contact us at 

About the author

Some text that describes me

Tag cloud

Recent comments

Comment RSS
Copyright © 2011 VIBlend  
Terms of Use | Privacy Policy
WinForms Controls Purchase Online About Us
DataGrid Navigation Pane Technical Support Blog
ScrollBar TreeView
ListBox ProgressBar Downloads Register
ComboBox Buttons
TabControl Editors Documentation Client Login

VIBlend Blog is powered by BlogEngine.NET