Code Library

This tutorial is intended to show you how to use image columns in a bound GridEX control.



In this tutorial, there are three column showing images. The first image column shows a default image for every cell in the column. In the second image column, the image is set in code depending on values of other cells in the same row and in the third image column the image displayed in the cell is set in a ValueList so it is dependant on the value of the cell.



1 - Create a new Visual Basic or C# project using "Windows Application" Template



2 - Add Products and Categories Tables from JSNorthwind database as a Data Source for the application. After adding the Tables, build the application to be able to see ProductsTableAdapter and CategoriesTableAdapter components in the tool box.



3 - Add a GridEX control to Form1.



4 - From the "Data Sources" window in the Application, drag Products table and drop it into the new GridEX control. JSNorthwindDataSet, ProductsTableAdapter and ProducctsBindingSource components will be created.



5 - In the Designer window of the GridEX control click on the "Retrieve Structure" button to let GridEX control create the root table and the columns matching those found in the data source.



6 - Once the base structure is created, modify the layout as you want, changing the column positions, column widths.



7 - Add an ImageList component to the form and assign it to the GridEX control setting its ExternalImageList property as the ImageList you added to the form. Add the Images you are going to use in the GridEX control. In this tutorial, we added 8 images corresponding to each product category, one image that represents the product and two other images: one to be displayed in products that are on sale and one to displayed in products that are discontinued.



8 - To create a simple image column follow these steps:



8.1 - In the GridEX Designer, select Columns collection below the RootTable node and click in the Add button.



8.2 - Select "Unbound Column" and change the Key of the new column to "Icon". Click Next.



8.3 - Clear the default Caption in the wizard and select Image in the ColumnType combo. Click Finish.



8.4 - Finally, in the ImageIndex or ImageKey property of the column, select the image you want to show in all the cells below that column.



9 - To create an image column that displays an image depending on the value of other cells in the row follow these steps:



9.1 - In the GridEX Designer, select Columns collection below the RootTable node and click in the Add button.



9.2 - Select "Unbound Column" and Change the Key of the new column to "StatusIcon". Click Next.



9.3 -Clear the default Caption in the wizard and set Image in the ColumnType combo. Click Finish.



9.4 - Finally, in the FormattingRow event of the control, write the code that sets the image index for each cell below that column:



In VB .Net:

  Private Sub GridEX1_FormattingRow(ByVal sender As System.Object, _

       ByVal e As RowLoadEventArgs) Handles GridEX1.FormattingRow

       If e.Row.RowType = RowType.Record Then

           If CType(e.Row.Cells("Discontinued").Value, Boolean) Then

               e.Row.Cells("StatusIcon").ImageKey = "discontinued"

           ElseIf CType(e.Row.Cells("OnSale").Value, Boolean) Then

               e.Row.Cells("StatusIcon").ImageKey = "onsale"

           End If

       End If

   End Sub

In C# .Net:

   private void GridEX1_FormattingRow(object sender, RowLoadEventArgs e)

   {

       if (e.Row.RowType == RowType.Record)

       {

           if ((bool)e.Row.Cells["Discontinued"].Value)

           {

               e.Row.Cells["StatusIcon"].ImageKey = "discontinued";

           }

           else if ((bool)e.Row.Cells["OnSale"].Value)

           {

               e.Row.Cells["StatusIcon"].ImageKey = "onsale";

           }

       }

   }

10 - To create an image column that displays an image assigned in a ValueList, follow these steps:



10.1 - In the GridEX Designer, select Columns collection below the RootTable node and, from the list of columns select CategoryID column.



10.2 -Set the ColumnType property of the column to ColumnType.ImageAndText and its EditType property to EditType.DropDownList



10.3 - Finally, in the Load event of the form, fill the ValueList with the categories available and assign one image to each item in the value list:



In VB .Net:

 Dim categories As GridEXColumn

       categories = GridEX1.RootTable.Columns("CategoryID")

       categories.HasValueList = True

       categories.ColumnType = ColumnType.ImageAndText

       categories.EditType = EditType.DropDownList

       Dim ValueList As GridEXValueListItemCollection

       ValueList = categories.ValueList

       Dim row As JSNorthWindDataSet.CategoriesRow

       For Each row In JSNorthWindDataSet.Categories.Rows

           Dim item As GridEXValueListItem

           item = New GridEXValueListItem(row.CategoryID, _

                                       row.CategoryName)

           'set image Key for items

           item.ImageKey = "Cat(" & row.CategoryID & ")"

           ValueList.Add(item)

       Next

In C# .Net:

   GridEXColumn categories = this.gridEX1.RootTable.Columns["CategoryID"];

   //To be able to get the ValueList from a column, its

   //HasValueList property must be true

   categories.HasValueList = true;

   categories.ColumnType = ColumnType.ImageAndText;

   categories.EditType = EditType.DropDownList;

   GridEXValueListItemCollection ValueList = categories.ValueList;



   //Categories table in the dataset was added as

   //the products table was added before

   foreach(NorthWind.CategoriesRow row in this.northWind1.Categories.Rows)

   {

       GridEXValueListItem item;

       item=new GridEXValueListItem(row.CategoryID,row.CategoryName);

       if(row.CategoryID<=8)              {                 //set image index for items 1 - 8                 //images start from 0 in the image list                 item.ImageIndex = row.CategoryID - 1;              }              ValueList.Add(item);      } 

15 - Press F5 and run the project.

Source Of Information : Janus v3.5 Help Files for VS 2008