Add image to a column and make column text a link

2 posts, 0 answers
  1. Hassan
    Hassan avatar
    10 posts
    Member since:
    Oct 2010

    Posted 14 Oct 2011 Link to this post

    Hi,

    I am using RadListView in DetailView type and have 4 columns.  I would like to display an image before the text in the 3rd column depending on the data in that column.  The column holds a file name i.e myFile.pdf and I would like to make that a link that is clickable how do I do that?

    I know this is twp questions into one but I really need a quick response and the Issue tracker site is not working at the moment

    Thanks
    H
  2. Ivan Todorov
    Admin
    Ivan Todorov avatar
    688 posts

    Posted 17 Oct 2011 Link to this post

    Hi Hassan,

    Thank you for your question.

    You can achieve this by creating a custom cell element and use the CellCreating event to incorporate it in RadListView. The following code demonstrates this:
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            this.radListView1.CellCreating += new Telerik.WinControls.UI.ListViewCellElementCreatingEventHandler(radListView1_CellCreating);
        }
      
        void radListView1_CellCreating(object sender, Telerik.WinControls.UI.ListViewCellElementCreatingEventArgs e)
        {
            if (e.CellElement.Data == this.radListView1.Columns[2] &&
                !(e.CellElement is DetailListViewHeaderCellElement))
            {
                DetailListViewVisualItem item = (DetailListViewVisualItem)
                    typeof(DetailListViewDataCellElement).GetField("row", BindingFlags.NonPublic | BindingFlags.Instance).GetValue(e.CellElement);
                e.CellElement =
                    new LinkCellElement(item, e.CellElement.Data);
            }
        }
    }
      
    public class LinkCellElement : DetailListViewDataCellElement
    {
        public LinkCellElement(DetailListViewVisualItem item, ListViewDetailColumn column)
            : base(item, column)
        {        }
      
        protected override void OnMouseDown(MouseEventArgs e)
        {
            base.OnMouseDown(e);
            //do what you need on the clicked message
            MessageBox.Show(this.Text);
        }
      
        public override void Synchronize()
        {
            base.Synchronize();
      
            this.Image = GetImageForFileType(this.Text); // load your image depending on the extension
            this.Font = new Font(this.Font, FontStyle.Underline);
            this.ForeColor = Color.DarkBlue;
        }
      
        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(DetailListViewDataCellElement);
            }
        }
    }

    Here we need to use reflection to get the row associated with the default cell, but in the next official releases we will introduce properties which will let you access them directly.

    I hope this is useful. In case you have any additional questions, do not hesitate to write back.

    Best wishes,
    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.

  3. UI for WinForms is Visual Studio 2017 Ready
Back to Top