Show Image in Grid View with Text

9 posts, 0 answers
  1. Dee
    Dee avatar
    9 posts
    Member since:
    Aug 2012

    Posted 07 Mar 2013 Link to this post

    Good Afternoon,

    i have a Problem with the Telerik RadGridView. I want to show an Image in a Cell and after the Image a Text in the same Cell. But when i start the Programm i can see Only the Asembly-Path (System.Drawing.Bitmap). What must i do to show the Image.

    Yours Sincerly
    Dee
  2. Stefan
    Admin
    Stefan avatar
    2911 posts

    Posted 12 Mar 2013 Link to this post

    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.
  3. Allen
    Allen avatar
    14 posts
    Member since:
    Aug 2012

    Posted 24 Jul 2013 Link to this post

    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><b>{0}  {1}</b><br/><i>{2}</i></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!
  4. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3957 posts

    Posted 29 Jul 2013 Link to this post

    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 >>
  5. Allen
    Allen avatar
    14 posts
    Member since:
    Aug 2012

    Posted 29 Jul 2013 Link to this post

    Thanks Desislava,

    Well, i prefer not to use custom cells. html formatting should be fine since according to the documentation, HTML-like Formatting supports image resources (which i will be using.)

    But apparently, my code does not work.. i also tried using a local image, but to no avail. any idea what i could be doing wrong?

    Thanks!

    PS.
    it still looks several times for me :P
  6. Allen
    Allen avatar
    14 posts
    Member since:
    Aug 2012

    Posted 01 Aug 2013 Link to this post

    anyone?

    the res:MyClass.Properties.Resources.birthday_16 is not rendering. local images are rendered ok (i guess i have missed something). but i prefer to use resources in this matter.
  7. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3957 posts

    Posted 01 Aug 2013 Link to this post

    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><b>image </b><img src=res:ProjectName.Resources.birthday.png width=20 height=20><i>text</i></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
    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 >>
  8. Allen
    Allen avatar
    14 posts
    Member since:
    Aug 2012

    Posted 01 Aug 2013 Link to this post

    this works now. thank you.


    i thought it would be more like a C# code where MyClass.Properties.Resources.myimage should work. 

    my images are added throught MyProject > properties > resources. i thought this is enough, but i have to set the image's Build Action property to "Embedded Resource"
  9. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3957 posts

    Posted 06 Aug 2013 Link to this post

    Hello Allen,

    Thank you for writing back.

    I am glad that the issue you were facing is now resolved. Please do not hesitate to contact us if you have any additional questions.

    It was pleasure for me to assist you.

    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 >>
Back to Top