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

HTML in ListView

2 Answers 147 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 19 Oct 2011, 03:42 PM
Being terrible at writing custom controls myself and needing more functionality out of the listview I had decided to try yours.

I noticed in an example that you can use HTML tags to modify how things are displayed in the ListView and this lead me to wonder if it supports <div> tags and if I can place images over images.

An example would be to have <div style=\"background-image:url('whatever');\"><img src=\"whatever2\"> where 'whatever2' would then be overlaid on top of 'whatever'.

Basically, I have two columns on the listview: 1 that displays an image and the other that will have text formatted through HTML tags.

The image in the first column I want to put a specialized border around unique to the information that's being displayed and the border is an image. The easiest way to do this in HTML is to simply have one be a background to the other. How do I go about this in your ListView, if it's even possible at all?

Edit: This is in C# for WinForms, by the way.

2 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Todorov
Telerik team
answered on 20 Oct 2011, 10:10 AM
Hi Jon,

Thank you for contacting us.

Yes, our Telerik Presentation Framework on which the RadControls for WinForms are built, allows one to use some of the HTML tags to format the visual elements. However, this is not full HTML support, but rather HTML-like means of formatting text. For more information about supported tags you can refer to this help article.

As to adding an image within another, you can use the following method which does this programatically:
public Image AddBorderToImage(Image mainImage)
{
    Image finalImage = Image.FromFile(@"C:\BorderImage.png");
    Graphics g = Graphics.FromImage(finalImage);
    g.DrawImage(mainImage,
        new Point((finalImage.Width - mainImage.Width) / 2, (finalImage.Height - mainImage.Height) / 2 ));
    return finalImage;
}

Then, you can use the VisualItemFormatting event of RadListView to add the border to the items' images:
void radListView1_VisualItemFormatting(object sender, Telerik.WinControls.UI.ListViewVisualItemEventArgs e)
{
    e.VisualItem.Image = AddBorderToImage(e.VisualItem.Data.Image);
}

I hope this is useful. Feel free to ask if you have any additional questions.

Regards,
Ivan Todorov
the Telerik team

Q2’11 SP1 of RadControls for WinForms is available for download (see what's new); also available is the Q3'11 Roadmap for Telerik Windows Forms controls.

0
Jon
Top achievements
Rank 1
answered on 20 Oct 2011, 10:12 PM
While I didn't quite get the event portion, setting the item image to the result of the method you provided did the trick I was looking for. I'll probably be back to ask more questions. :]
Tags
ListView
Asked by
Jon
Top achievements
Rank 1
Answers by
Ivan Todorov
Telerik team
Jon
Top achievements
Rank 1
Share this question
or