This sample reads the photo field in the Employee table of the Northwind database and displays the photos in a couple of columns within a grid.
Given below is a sample image.
Grid Data-Bound Image Cell
In this sample,
One column displays the pictures directly in the grid cell, while the other displays the pictures as a drop-down from the cell.
Image Draw Modes:
Fit to Cell - Resizes the image to fit the cell
No Resize - Image is drawn with its original size
Fit Proportionally - Draws the image in proportion to the cell size.
Features
The cell that displays the pictures (ImageCell)
is derived from GridStaticCellModel and GridStaticCellRenderer classes.
It has three ways to handle fitting the picture to the cell using
the properties: FitToCell, NoResize, and
FitProportionally. These properties are defined in the
GridImageCellModel class. GridStyleInfo.CellValue has the photo as a byte array. This is streamed to an
image and drawn to the cell in the OnDraw override.
Refer to the following code in GridImageCellRenderer.cs.
protected override void OnDraw(System.Drawing.Graphics g, System.Drawing.Rectangle clientRectangle,
int rowIndex, int colIndex, Syncfusion.Windows.Forms.Grid.GridStyleInfo style)
{
if (clientRectangle.IsEmpty)
return;
try
{
Byte[] pict = style.CellValue as Byte[];
if(pict != null)
{
int PictOffSet = ((GridImageCellModel)this.Model).PictureBufferOffset;
MemoryStream buffer = new MemoryStream(pict, PictOffSet, pict.Length - PictOffSet);
Image image = Image.FromStream(buffer, true);
GridImageCellDrawOption cellDrawOption = ((GridImageCellModel)this.Model).CellDrawOption;
System.Drawing.GraphicsUnit gu = System.Drawing.GraphicsUnit.Point;
RectangleF srcRect = image.GetBounds(ref gu);
Rectangle destRect = Rectangle.Empty;
Region saveRegion = g.Clip;
switch(cellDrawOption)
{
case GridImageCellDrawOption.FitToCell:
destRect = clientRectangle;
break;
case GridImageCellDrawOption.NoResize:
destRect = new Rectangle(clientRectangle.X, clientRectangle.Y, (int) srcRect.Width, (int) srcRect.Height);
g.Clip = new Region(clientRectangle);
break;
case GridImageCellDrawOption.FitProportionally:
{
float srcRatio = srcRect.Width / srcRect.Height;
float tarRatio = (float) clientRectangle.Width / clientRectangle.Height;
destRect = clientRectangle;
if( tarRatio < srcRatio )
{
destRect.Height = (int) (destRect.Width * srcRatio);
}
else
{
destRect.Width = (int) (destRect.Height * srcRatio);
}
}
break;
default:
break;
}
if(!destRect.IsEmpty)
g.DrawImage(image, destRect, srcRect, gu);
g.Clip = saveRegion;
}
}
catch{}
}
The cell that displays the pictures in the drop-down is derived from
GridDropDownCellModel/GridDropDownCellRenderer.
A picture box is added to the drop-down container to show the picture. The GridStyleInfo.CellValue has the photo as a byte array. This is streamed to an
image and is assigned to the picture box in the
OnInitialize override.
Refer the
following code in GridDropDownImageCellRenderer.cs.
protected override void OnInitialize(int rowIndex, int colIndex)
{
GridStyleInfo style = Grid.Model[rowIndex, colIndex];
Byte[] pict = style.CellValue as Byte[];
if(pict != null)
{
int PictOffSet = 78;//((GridImageCellModel)this.Model).PictureBufferOffset;
MemoryStream buffer = new MemoryStream(pict, PictOffSet, pict.Length - PictOffSet);
this.picImage = Image.FromStream(buffer, true);
System.Drawing.GraphicsUnit gu = System.Drawing.GraphicsUnit.Point;
RectangleF srcRect = this.picImage.GetBounds(ref gu);
this.pictureWidth = (int) srcRect.Width;
this.pictureHeight = (int) srcRect.Height;
if(this.pictureBox != null)
pictureBox.Image = this.picImage;
}
}
In the sample, if you enable the proportional grid cells and resize the form, you will notice that the
grid changes the column widths and row heights to dynamically fit the client area. This is achieved by handling the Model.QueryColWidth and the
Model.QueryRowHeight events and providing the size on demand.
Refer the following code in
Form1.cs.
// In the Form Load
//handle dynamically sizing columns/rows to clientarea
this.gridDataBoundGrid1.Model.QueryColWidth += new GridRowColSizeEventHandler(GetColWidth);
this.gridDataBoundGrid1.Model.QueryRowHeight += new GridRowColSizeEventHandler(GetRowHeight);
private void GetColWidth(object sender, GridRowColSizeEventArgs e)
{
if(this.proportionalCellSizing && e.Index > 0)
{
e.Size = (int) ((this.gridDataBoundGrid1.ClientRectangle.Width - this.gridDataBoundGrid1.Model.ColWidths[0])
/ (float)this.gridDataBoundGrid1.Model.ColCount);
e.Handled = true;
}
}
private void GetRowHeight(object sender, GridRowColSizeEventArgs e)
{
if(this.proportionalCellSizing && e.Index > 0)
{
e.Size = (int) ((this.gridDataBoundGrid1.ClientRectangle.Height - this.gridDataBoundGrid1.Model.RowHeights[0])
/ (float)this.gridDataBoundGrid1.Model.RowCount);
e.Handled = true;
}
}