DropDown Image Editor in C1TrueDbGrid

At times, it is visually appealing to show images instead of just indexes or texts in a grid's column and the grid's dropdown. For instance, consider a grid wherein we want to show some variety of shapes along with its name. Adding the images depicting the shapes next to its name column will add the visual appeal to the grid for the end users. This blog explains an approach of attaching an Image DropDown Editor in C1TrueDbGrid's column wherein C1Combo's images have been used as the editor of C1TrueDbGrid's column. We will implement this with the help of ImageList which manages a collection of images used by C1Combo and C1TrueDbGrid for populating images. First of all, we will populate ImageList with the Images kept in a folder:

ImageList1 = new ImageList();  
ImageList1.ImageSize = new Size(112, 112);  
// Populating ImageList  
string[] filePaths = Directory.GetFiles(@"..\\..\\Images\\");  
for (int index = 0; index < filePaths.Length; index++)  
{  
    ImageList1.Images.Add(Image.FromFile(filePaths[index]));  
}

Then C1Combo is bound to a list of String which stores Id's to images as shown below:

items = new string[this.ImageList1.Images.Count];  
for (int index = 0; index <= this.ImageList1.Images.Count - 1; index++)  
    items[index] = "Item " + index.ToString();  
c1Combo1.DataSource = items;

Next, it is mapped with the images in ImagesList using C1Combo's FetchCellStyle event.

void c1Combo1_FetchCellStyle(object sender, C1.Win.C1List.FetchCellStyleEventArgs e)  
{  
   // To map images in C1Combo's Column  
   e.CellStyle.ForegroundImage = ImageList1.Images[e.Row];  
}

Similarly, C1TrueDbGrid is also mapped with images in ImageList using C1TrueDbGrid's FetchCellStyle event.

void c1TrueDBGrid1_FetchCellStyle(object sender, C1.Win.C1TrueDBGrid.FetchCellStyleEventArgs e)  
{  
    var cellText = c1TrueDBGrid1[e.Row, e.Col];  
    if (cellText.ToString() == "")  
    {  
        // To map image in C1TrueDbGrid's Cell  
        e.CellStyle.ForegroundImage = ImageList1.Images[e.Row];  
    }  
    else  
    {  
        // To change image in C1TrueDbGrid's Cell after selecting from given image editor  
        int editorRowIndex = items.ToList().IndexOf(cellText.ToString());  
        e.CellStyle.ForegroundImage = ImageList1.Images[editorRowIndex];  
    }  
}

Once C1TrueDbGrid and C1Combo are populated with Images, we will set C1Combo as the Editor of Image column in C1TrueDbGrid.

// Setting C1Combo as Editor of C1TrueDbGrid's Column  
c1TrueDBGrid1.Columns[1].Editor = c1Combo1;

This attaches an Image Editor to C1TrueDbGrid's Image Column. Please refer to the attached sample for the detailed implementation of the above code. Download Sample_CS Download Sample_VB