ListView Background image

[John]

Hello Support Team.
I need to know is it possible to put an image in cells?
For example in item(2)(4) of radListView1
Thanks.

[Dimitar]

Hello John,

Thank you for contacting Telerik support.

If I understand you correctly you want to put a image as a background of the a particular cell. This can be achieved by subscribing to the CellFormatting event. There you can set the BackgroundImage property in order to display any desired image:

void radListView1_CellFormatting(object sender, ListViewCellFormattingEventArgs e)
{
    DetailListViewDataCellElement cell = e.CellElement as DetailListViewDataCellElement;

    if (cell != null && cell.Row == radListView1.Items[4] && cell.Data == radListView1.Columns[2])
    {
        e.CellElement.BackgroundImage = Resources.telerikLogo;
        e.CellElement.BackgroundImageLayout = ImageLayout.Stretch;
    }
    else
    {
        e.CellElement.ResetValue(LightVisualElement.BackgroundImageProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.CellElement.ResetValue(LightVisualElement.BackgroundImageLayoutProperty, Telerik.WinControls.ValueResetFlags.Local);
    }

}

Please note that when you are using this event to customize the items appearance, you should always provide an else clause, where you reset the appearance settings which you have made. This is necessary since RadListView uses data virtualization, which might lead to unpredicted appearance results when items are being reused.

I hope this helps. Should you have any other questions do not hesitate to ask.

Regards,
Dimitar
Telerik

[John]

Thanks.
This code seems work fine.
But it is too long if I write this code for each cells.
What I want is having a list view with images in cells, not words.
So if I write this code for each cells, it will be a very long code.
Please let me know is it possible to use a simple code like something below?

this.RadListView1.Items[2][4].Image=My.Resources.test

I need to put 50 images in 50 cells in my test program.
So would you please give me a simple code?
Thanks.

[Dimitar]

Hello John,

Thank you for writing back.

If you want to have 50 different images to 50 different cells, there is no short way and you need to specify those images somewhere and you should use the CellFormatting event to set them.

If you are in databound mode and your data object contains the image, you can easily access it in the CellFormatting event and use it.

Please let me know if there is something else I can help you with. 

Regards,
Dimitar
Telerik

[John]

I got confused !!!!
First of all, I converted your code via telerik code converter.
Bellow is the converted code:

Private Sub radListView1_CellFormatting(sender As Object, e As ListViewCellFormattingEventArgs)
    Dim cell As DetailListViewDataCellElement = TryCast(e.CellElement, DetailListViewDataCellElement)

    If cell IsNot Nothing AndAlso cell.Row = radListView1.Items(4) AndAlso cell.Data = radListView1.Columns(2) Then
        e.CellElement.BackgroundImage = Resources.telerikLogo
        e.CellElement.BackgroundImageLayout = ImageLayout.Stretch
    Else
        e.CellElement.ResetValue(LightVisualElement.BackgroundImageProperty, Telerik.WinControls.ValueResetFlags.Local)
        e.CellElement.ResetValue(LightVisualElement.BackgroundImageLayoutProperty, Telerik.WinControls.ValueResetFlags.Local)
    End If

End Sub

But Visual Studio gives me error on IF line.


Also there is another thing that made me confuse.
It seems your code is an EventArg.
I don't want to have EventArg, couse user doesn't allow to edit it.
So what I want is just putting a picture from resources, to cell(2)(4) via code.
For example something like bellow:

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
     Me.RadListView1.Items(2)(4).Text="Hello"
     Me.RadListView1.Items(2)(4).Image=My.Resources.Test
End Sub

Would you please help me again?
Thanks.


 

[John]

Hello Dimitar.
Did you read my last post?
Thanks.

[Dimitar]

Hi John,

Thank you for writing back.

I have created and attached a sample project where I am setting the images in similar to the desired way. To achieve this I am using a custom class which have just to properties (image and text). Also please note that again I am using the CellFormatting event to display the images. This is necessary because RadListView is using UI virtualization. This means that the cell elements are created only for currently visible cells and are being reused during operations like scrolling, filtering, grouping and so on. In order to prevent applying the formatting to other columns' cell elements (because of the cell reuse) all customization should be resetted for the rest of the cell elements.

I hope this will be useful. Should you have further questions, I would be glad to help.

Regards,
Dimitar
Telerik