How to add 3 images in single cellelement( left ,centre, right) in Radlistview

1 Answer 109 Views
ListView
Naresh
Top achievements
Rank 1
Iron
Naresh asked on 06 Apr 2023, 05:43 PM

Hi Team,'

I need to implementaion for 3 or above images adding in single cell in Radlistview .Example, bellow snapshot.

1 Answer, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 07 Apr 2023, 04:53 AM

Hello, Hemanth,

According to the provided screenshot, it seems that you are using RadListView in DetailsView. If you need to add multiple images in a cell, it is suitable to create a custom DetailListViewDataCellElement and add the desired elements. The following help article demonstrates a sample approach how to customize the cells:

https://docs.telerik.com/devtools/winforms/controls/listview/custom-items#custom-items-in-detailsview-viewtype 

I have prepared a sample code snippet for your reference:

        public RadForm1()
        {
            InitializeComponent();
            this.radListView1.CellCreating += radListView1_CellCreating;
            this.radListView1.ViewType = ListViewType.DetailsView;
        }

        private void radListView1_CellCreating(object sender, ListViewCellElementCreatingEventArgs e)
        {
            DetailListViewDataCellElement cell = e.CellElement as DetailListViewDataCellElement;
            if (cell != null)
            {
                if (cell.Data.Name == "Picture")
                {
                    e.CellElement = new CustomDetailListViewDataCellElement(cell.RowElement, e.CellElement.Data);
                }
                else
                {
                    e.CellElement = new DefaultDetailListViewDataCellElement(cell.RowElement, e.CellElement.Data);
                }
            }
        }

        private void RadForm1_Load(object sender, EventArgs e)
        {
            // TODO: This line of code loads data into the 'nwindDataSet.Products' table. You can move, or remove it, as needed.
            this.productsTableAdapter.Fill(this.nwindDataSet.Products);

            this.radListView1.DataSource = this.productsBindingSource;
        }

        public class DefaultDetailListViewDataCellElement : DetailListViewDataCellElement
        {
            public DefaultDetailListViewDataCellElement(DetailListViewVisualItem owner,
                ListViewDetailColumn column) : base(owner, column)
            {
            }

            protected override Type ThemeEffectiveType
            {
                get
                {
                    return typeof(DetailListViewHeaderCellElement);
                }
            }

            public override bool IsCompatible(ListViewDetailColumn data, object context)
            {
                if (data.Name == "Picture")
                {
                    return false;
                }
                return base.IsCompatible(data, context);
            }
        }
        
        public class CustomDetailListViewDataCellElement : DetailListViewDataCellElement
        {
            private StackLayoutElement container;
            private LightVisualElement leftImage;
            private LightVisualElement centerImage;
            private LightVisualElement rightImage;

            public CustomDetailListViewDataCellElement(DetailListViewVisualItem owner,
                ListViewDetailColumn column) : base(owner, column)
            {
            }

            protected override void CreateChildElements()
            {
                base.CreateChildElements();
                container = new StackLayoutElement();
                container.Orientation = Orientation.Horizontal;
                this.leftImage = new LightVisualElement();
                this.leftImage.ImageLayout = System.Windows.Forms.ImageLayout.Zoom;
                this.centerImage = new LightVisualElement();
                this.centerImage.ImageLayout = System.Windows.Forms.ImageLayout.Zoom;
                this.rightImage = new LightVisualElement();
                this.rightImage.ImageLayout = System.Windows.Forms.ImageLayout.Zoom;
                this.container.Children.Add(leftImage);
                this.container.Children.Add(centerImage);
                this.container.Children.Add(rightImage);
                this.Children.Add(this.container);
            }

            protected override Type ThemeEffectiveType
            {
                get
                {
                    return typeof(DetailListViewHeaderCellElement);
                }
            }

            public override void Synchronize()
            {
                base.Synchronize();
                this.Text = "";
                DataRowView rowView = this.Row.DataBoundItem as DataRowView;
                if (rowView != null)
                {
                    this.leftImage.Image = GetImageFromData(rowView.Row["Picture"] as byte[]);
                    this.centerImage.Image = GetImageFromData(rowView.Row["Picture"] as byte[]);
                    this.rightImage.Image = GetImageFromData(rowView.Row["Picture"] as byte[]);
                }
            }

            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 bool HasOleContainerHeader(byte[] imageByteArray)
            {
                const byte OleByte0 = 21;
                const byte OleByte1 = 28;
                return (imageByteArray[0] == OleByte0) && (imageByteArray[1] == OleByte1);
            }

            public override bool IsCompatible(ListViewDetailColumn data, object context)
            {
                if (data.Name != "Picture")
                {
                    return false;
                }
                return base.IsCompatible(data, context);
            }
        }

Note that in the Synchronize method all of the 3 image elements use the same Image value in the example. However, you need to adopt the Image extracting according to the data item you have.

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

Regards,
Dess | Tech Support Engineer, Principal
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.

Naresh
Top achievements
Rank 1
Iron
commented on 10 Apr 2023, 05:27 AM

Hi Team.

Thanks for information,

I need one more for help ,how to Implement some specific gap or distance  between 3 images in single cell, please find bellow snapshot.

And how to container align centre of  cell.

 

 

Dess | Tech Support Engineer, Principal
Telerik team
commented on 12 Apr 2023, 10:40 AM

Hemanth,

The illustrated stars are quite similar to the GridViewRatingColumn that RadGridView offers out of the box. Please refer to the following help article:

https://docs.telerik.com/devtools/winforms/controls/gridview/columns/column-types/gridviewratingcolumn 

 

Naresh
Top achievements
Rank 1
Iron
commented on 17 Apr 2023, 02:18 PM

Hi Team,

while scroll down the images are double time inserting into cell.

Thanks

Dess | Tech Support Engineer, Principal
Telerik team
commented on 20 Apr 2023, 05:43 AM

Hi, Hemanth,

I am sorry to hear that you are experiencing any difficulties with the Telerik UI for WinForms suite. However, it is not clear to me whether you are using the custom DetailListViewDataCellElement in RadListView or the previously suggested GridViewRatingColumn with the star elements in RadGridView. Could you please specify it?

It would be also greatly appreciated if you can provide a complete code snippet which I can copy/paste in my sample project and replicate the undesired behavior you are facing. You can use the code snippet I previously provided as a starting point for your reference. Thus, I can make an adequate analysis of the precise case ad provide further assistance. 

Thank you in advance for your cooperation. I am looking forward to your reply.

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