This is a migrated thread and some comments may be shown as answers.

Show Image in Grid View with Text

8 Answers 1762 Views

GridView

This is a migrated thread and some comments may be shown as answers.

8 Answers, 1 is accepted

answered on 12 Mar 2013, 07:50 AM

Hello Dee,

Thank you for writing.

To do that you should use the CellFormatting event of RadGridView, where you can assign image to the cells in a GridViewTextBoxColumn in additional to their text:

void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)

{

if (e.Column.Name == "StringColumn")

{

e.CellElement.Image = Resources.folder;

e.CellElement.ImageAlignment = ContentAlignment.MiddleLeft;

e.CellElement.TextImageRelation = TextImageRelation.ImageBeforeText;

}

else

{

e.CellElement.ResetValue(LightVisualElement.ImageProperty, ValueResetFlags.Local);

e.CellElement.ResetValue(LightVisualElement.ImageAlignmentProperty, ValueResetFlags.Local);

e.CellElement.ResetValue(LightVisualElement.TextImageRelationProperty, ValueResetFlags.Local);

}

More information about the formatting events of RadGridView can be found here: http://www.telerik.com/help/winforms/gridview-cells-formatting-cells.html.

I hope that you find this information useful. Let us know if you have any other questions.

Greetings,
Stefan
the Telerik team

WinForms Q1 2013 boasts PivotGrid, PDF Viewer, Chart enhancements and more. Check out all of the latest highlights.

answered on 24 Jul 2013, 07:43 AM

this topic fits my problem..

here's mine:

depending on the record, some cells will have text-image-text (like a skype with emoticons in it), and some will have text-text

here's the code:

string IMG = "";

for (int i = 0; i < SourceTable.Rows.Count; i++)

{

IMG = "";

if (!String.IsNullOrWhiteSpace(SourceTable.Rows[i][BD].ToString()))

if (Convert.ToBoolean(SourceTable.Rows[i][BD].ToString()))

IMG = @"<img src=""res:MyClass.Properties.Resources.birthday_16"">";

SourceTable.Rows[i][TI] = String.Format("<html>{0} {1} {2}</html>", SourceTable.Rows[i][TI], IMG, SourceTable.Rows[i][DT]);

}

the html tags are rendering ok. but the image tag for a resource image is not rendered. i tried using MyClass.Properties.Resources.birthday_16 and Properties.Resources.birthday_16 but to no avail.

i have other gridviews in the other modules using the cell formatting event.

we all know that cell formatting event is fired everytime.. (when click the control, focused on, shown in the screen (like the window is minimized then maximized, this event is fired))

and i couldn't think of any other way to display a text-image-text.

if this could help in anyway:
it's a 16×16px png file
it's a resource
"TI" and "BD" are string constants

thanks!

answered on 29 Jul 2013, 07:20 AM

image-text.png

Hello Allen,

Thank you for writing back.

CellFormatting event is fired only for visual cells which is not so many times.
If you still wish to not use the CellFormatting you can use a custom cell. Please have a look at the following help article: http://www.telerik.com/help/winforms/gridview-cells-custom-cells.html

You may use the following code snippet to achive the view from the attached image:

public Form1()

{

InitializeComponent();

List<Item> dataItems = new List<Item>

{

new Item("First", "Some description", Properties.Resources.birthday),

new Item("Second", "Some description", Properties.Resources.birthday),

new Item("Third", "Some description", Properties.Resources.birthday),

new Item("Fourth", "Some description", Properties.Resources.birthday),

new Item("Fifth", "Some description", Properties.Resources.birthday),

new Item("Sixth", "Some description", Properties.Resources.birthday),

new Item("Seventh", "Some description", Properties.Resources.birthday),

};

this.radGridView1.Columns.Add(new GridViewTextBoxColumn("Name"));

this.radGridView1.Columns.Add(new GridViewTextBoxColumn("Description"));

this.radGridView1.Columns.Add(new CustomImageColumn("Image"));

this.radGridView1.AutoGenerateColumns = false;

this.radGridView1.DataSource = dataItems;

}

public class Item

{

public string Name { get; set; }

public string Description { get; set; }

public Image Image { get; set; }

public Item(string name, string description, Image image)

{

this.Name = name;

this.Description = description;

this.Image = image;

}

public class ImageCell : GridDataCellElement

{

public ImageCell(GridViewColumn column, GridRowElement row) : base(column, row)

{

}

private StackLayoutElement stackElement;

private LightVisualElement textElement;

private LightVisualElement imageElement;

protected override void CreateChildElements()

{

base.CreateChildElements();

this.stackElement = new StackLayoutElement();

this.stackElement.StretchHorizontally = true;

this.stackElement.StretchVertically = true;

this.textElement = new LightVisualElement();

this.imageElement = new LightVisualElement();

stackElement.Children.Add(textElement);

stackElement.Children.Add(imageElement);

this.Children.Add(stackElement);

}

protected override void SetContentCore(object value)

{

if (this.Value != null && this.Value != DBNull.Value && this.ColumnInfo.Name == "Image")

{

Item item = this.RowInfo.DataBoundItem as Item;

if (item != null)

{

this.imageElement.Image = item.Image;

this.imageElement.ImageLayout = ImageLayout.Zoom;

this.textElement.Text = item.Description;

}

public override bool IsCompatible(GridViewColumn data, object context)

{

return data.Name == "Image" && context is GridDataRowElement;

}

protected override Type ThemeEffectiveType

{

get

{

return typeof(GridDataCellElement);

}

public class CustomImageColumn : GridViewDataColumn

{

public CustomImageColumn(string fieldName) : base(fieldName)

{

}

public override Type GetCellType(GridViewRowInfo row)

{

if (row is GridViewDataRowInfo)

{

return typeof(ImageCell);

}

return base.GetCellType(row);

}

Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINFORMS.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>

answered on 01 Aug 2013, 08:55 PM

setEmbeddedResource.png

embeddedResource.png

Hello Allen,

Thank you for writing back.

It is necessary to set the resource image as Embedded resource: please see the attached picture setEmbeddedResource.png. When you want to access the resource picture by HTML you should use the following code:

private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)

{

if (e.CellElement.ColumnInfo.Name == "Image2" && e.CellElement.RowIndex > -1)

{

e.CellElement.Text = @"<html>image <img src=res:ProjectName.Resources.birthday.png width=20 height=20>text</html>";

}

N.B. My resource image is birthday.png. "ProjectName" should be replaced with the corresponding name.
I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik