HTML in ListView

[Jon]

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.

[Ivan Todorov]

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

[Jon]

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. :]