HTML in ListView

3 posts, 1 answers
  1. Jon
    Jon avatar
    4 posts
    Member since:
    Oct 2011

    Posted 19 Oct 2011 Link to this post

    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.
  3. Answer
    Ivan Todorov
    Admin
    Ivan Todorov avatar
    688 posts

    Posted 20 Oct 2011 Link to this post

    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.

  5. Jon
    Jon avatar
    4 posts
    Member since:
    Oct 2011

    Posted 20 Oct 2011 Link to this post

    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. :]
Back to Top