Add image to a column and make column text a link

[Hassan]

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

[Ivan Todorov]

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