Customising ListViewDataItem

1 Answer 94 Views
ListView
Zaven Alexander
Top achievements
Rank 2
Iron
Zaven Alexander asked on 19 Nov 2023, 07:26 AM | edited on 19 Nov 2023, 10:09 AM

Hello, 

I'm currently building a material library tool using Telerik's RadListView. I pretty much got it near exactly what I'm after. However, I'm having some trouble with the last feature, and I'm hoping someone can provide some insight.

What I'd like to do is add an icon to the top left-hand corner of each item that will represent their category.

So far, using the following code and a bit of trickery with HTML markup, my ListView Items currently look like this.

(Written in C++)

    //Create a new ListView Item
    Item = gcnew ListViewDataItem();
    
    //Generate HTML Label
    String^ Label = "<html><strong>" + Name + "</strong><br><span style=\"color:f5f5f5\"><i>" + Latin + "</i></span></html>";
    Item->Text = Label;
    Item->TextAlignment = ContentAlignment::MiddleCenter;
    Item->TextImageRelation = Windows::Forms::TextImageRelation::ImageAboveText;

    //Load the Thumbnail
    String^ thumbnailPath = Path + "\\" + ThumbPath;
    Item->Image = Image::FromFile(thumbnailPath);
    Item->ImageAlignment = ContentAlignment::TopCenter;
   

However, what I'd like to achieve is this:

I was hoping there was a Background Image property for ListViewDataItem. However, that doesn't seem to be the case. Is there a clever trick to achieve this? Or is my only option to create a Custom ListViewDataItem as described here? https://docs.telerik.com/devtools/winforms/controls/listview/custom-items

Thanks!

1 Answer, 1 is accepted

Sort by
0
Accepted
Dinko | Tech Support Engineer
Telerik team
answered on 21 Nov 2023, 02:59 PM

Hello Zaven Alexander,

Thank you for the provided details.

Adding a custom element at the top left corner will be possible by creating a custom ListViewDataItem, as you have already found. It will be better to create a custom one as this will give you more freedom to design the ListViewDataItem per your requirements. You could check the Shopping Cart Item for RadListView KB article which describes how you can create a custom class that derives from SimpleListViewVisualItem and customize it per your needs.

Regards,
Dinko | Tech Support Engineer
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Zaven Alexander
Top achievements
Rank 2
Iron
commented on 21 Nov 2023, 04:38 PM

Thank you for providing the shopping cart example. I'll have a crack at this and share the results :) 
Tags
ListView
Asked by
Zaven Alexander
Top achievements
Rank 2
Iron
Answers by
Dinko | Tech Support Engineer
Telerik team
Share this question
or