1 Answer, 1 is accepted
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:
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.
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.
Hemanth,
The illustrated stars are quite similar to the GridViewRatingColumn that RadGridView offers out of the box. Please refer to the following help article:
Hi Team,
while scroll down the images are double time inserting into cell.
Thanks
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.