Search code examples
c#radgrid

RadGrid show Multiple Images in a single cell


I want to show multiple images in a single gridimagecolumn side by side, my data would be in this format image1|image2|image3 etc, I am only able to show the last image for example if my data is image1|image2|image3 only image 3 is displayed. I know what I am doing wrong, the image URL is being overridden by the latest URL just not able think through the logic to achieve this

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            TableCell ImageData = (TableCell)item["ImageData"];

            string [] data = ImageData.Text.Split('|');

            for (int i = 0; i < data.Length; i++)
            {
                if (data[i] != null)
                {

                    if (data[i].ToLower() == "image1")
                    {
                        Image img = (Image)item["GridImageColumn"].Controls[0];
                        img.ImageUrl = "~/Images/image1.png";//set image url

                    }

                    else if (data[i].ToLower() == "image2")
                    {
                            Image img = (Image)item["GridImageColumn"].Controls[0];
                            img.ImageUrl = "~/Images/image2.png";//set image url
                    }

                    else if (data[i].ToLower() == "image3")
                    {
                        Image img = (Image)item["GridImageColumn"].Controls[0];
                        img.ImageUrl = "~/Images/image3.png";//set image url
                    }

                    else
                    {
                        TableCell cell = (TableCell)item["GridImageColumn"];
                        cell.Text = " ";//clears image column
                    }
                }
            }
        }
}

Solution

  • You're assigning different URL to the same image control in Ifelse condition so its overriding it with latest one. Instead add new Image control to the cell and assign URL. haven't tested but something like below should get you started,

    GridDataItem item = (GridDataItem)e.Item;
    Image img = New Image();
    img.ID = "Image1";
    img.ImageUrl = "~/Images/image1.png";
    item["your Column name"].Controls.Add(img);
    

    Or

    You can use GridTemplateColumn and add required Image control to Item tempate and go from there.