This is a migrated thread and some comments may be shown as answers.

add image to radListView

1 Answer 549 Views
ListView
This is a migrated thread and some comments may be shown as answers.
KH.
Top achievements
Rank 1
KH. asked on 28 Jan 2021, 09:51 AM

     i create DataTable and set to RadListView Datasource

DataTable x = -----------;

radlistview1.datasource = x;

radlistview1.DisplayMember = "Item";
radlistview1.ValueMember = "ID";

how can i add image in ListView (IconeView)

(images addresses in datatable - img column)

 

please help

1 Answer, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 01 Feb 2021, 11:59 AM

Hello,

In order to add an image to the visual item, you can subscribe to the VisualItemFormatting event, extract the image from the DataBoundItem and apply it to the visual item. 

I have prepared a sample code snippet for your reference:

        public RadForm1()
        {
            InitializeComponent();
            this.radListView1.VisualItemFormatting += radListView1_VisualItemFormatting;
        }

        private void radListView1_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
        {
            DataRowView rowView = e.VisualItem.Data.DataBoundItem as DataRowView;
            if (rowView != null)
            {
                e.VisualItem.Image = GetImageFromData(rowView.Row["Picture"] as byte[]);
                e.VisualItem.DrawImage = true;
                e.VisualItem.DrawText = true;
                e.VisualItem.TextImageRelation = TextImageRelation.TextAboveImage;
                e.VisualItem.ImageLayout = ImageLayout.None;
            }
        }

        private bool HasOleContainerHeader(byte[] imageByteArray)
        {
            const byte OleByte0 = 21;
            const byte OleByte1 = 28;
            return (imageByteArray[0] == OleByte0) && (imageByteArray[1] == OleByte1);
        }

        private Image GetImageFromData(byte[] imageData)
        {
            const int OleHeaderLength = 78;
            MemoryStream memoryStream = new MemoryStream();
            if (HasOleContainerHeader(imageData))
            {
                memoryStream.Write(imageData, OleHeaderLength, imageData.Length - OleHeaderLength);
            }
            else
            {
                memoryStream.Write(imageData, 0, imageData.Length);
            }
            Bitmap bitmap = new Bitmap(memoryStream);
            return bitmap.GetThumbnailImage(55, 65, null, new IntPtr());
        }

        private void RadForm1_Load(object sender, EventArgs e)
        { 
            this.productsTableAdapter.Fill(this.nwindDataSet.Products);
            this.radListView1.DisplayMember = "ProductName";
            this.radListView1.ValueMember = "ProductID";
            this.radListView1.DataSource = this.productsBindingSource;

            this.radListView1.ViewType = ListViewType.IconsView;
            
            this.radListView1.ItemSize = new Size(100, 100);
        }

I hope this information helps. If you need any further assistance please don't hesitate to contact me.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ListView
Asked by
KH.
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or