[Solved] Selecting Image for RadGrid from aspx.cs

[Scott]

I generate the columns for my RadGrid in code behind.  I do this by creating a DataTable from a stored procedure and then binding the DataTable to the RadGrid.  I now want to display a graphic in certain columns based in the information in that cell.  I normally do it in the .aspx code like this:

<telerik:GridTemplateColumn DataField="State" DataType="System.Boolean" FilterControlAltText="Filter Public column" HeaderText="State" SortExpression="State" UniqueName="State">
<ItemTemplate>
<asp:Image ID="Image1" ImageUrl="~/images/true.png" Visible='<%# (bool)Eval("State") == true %>' runat="server" />
<asp:Image ID="Image2" ImageUrl="~/images/false.png" Visible='<%# (bool)Eval("State") == false %>' runat="server" />
</ItemTemplate>
</telerikf:GridTemplateColumn>

I can't seem to figure out how to do this in code behind.  I can add an image to the column, but it is the same image for all cells in the column.  I don't know where to add code (in the column definition) that changes the image based on the value of the cell.  Here is how I create the column and add an image which is the same for all cells.         

string templateColumnName = dc.ColumnName;
GridTemplateColumn templateColumn = new GridTemplateColumn();
templateColumn.ItemTemplate = new MyItemTemplate(templateColumnName);
templateColumn.HeaderText = templateColumnName;
templateColumn.DataField = dc.ColumnName;
this.RadGrid1.MasterTableView.Columns.Add(templateColumn);

private class MyItemTemplate : ITemplate
{
        protected Image myimage;
        private string colname;
        public MyItemTemplate(string cName)
        {
            colname = cName;
        }
        public void InstantiateIn(System.Web.UI.Control container)
        {
            myimage = new Image();
            myimage.ImageUrl = "";  // Setting an image here works, but is the same for all cells
            myimage.ID = "templateColumnImage";
            container.Controls.Add(myimage);
       }
}

I have thought of adding the rows to the RadGrid one at a time, but I would rather define the column and then just bind the RadGrid to the DataTable.  I also want to select between more than two images, so the "Visable = (bool)Eval" in the first example is not sufficient, but I figure I can change a given solution to work how I want it. 

[Princy]

Hi,

You can check for the value of the DataField in a row and in ItemDataBound event and assign an ImageUrl for 'true' and another for 'false'.

C#:

void grid_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem ditem = (GridDataItem)e.Item;
        string value=((DataRowView)e.Item.DataItem)["State"].ToString();
        if (value == "false")
        {
            Image img = (Image)ditem.FindControl("templateColumnImage");
            img.ImageUrl = "your url";
        }
    }
}

Thanks,
Princy.

[Scott]

When using "Image img = (Image)ditem.FindControl("templateColumnImage");"  I get an error because multiple controls with the same ID were found.  When I define the column I assign an image ID for the image column.  I don't know how to change that so it is different for each row in the column.  Right now I assign a default image to all rows in the column. 

public void InstantiateIn(System.Web.UI.Control container)
     {
         myimage = new Image();
         myimage.ImageUrl = "~/images/fail.png";
         myimage.ID = "image1";
         container.Controls.Add(myimage);
     }

[Princy]

Hi,

Unfortunately I couldn't replicate any issue. Here is my complete code.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" />
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString3 %>"
    ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Customers"
    runat="server"></asp:SqlDataSource>

C#:

protected void Page_Load(object sender, System.EventArgs e)
{
    if (!IsPostBack)
    {
        RadGrid1.ItemDataBound += new GridItemEventHandler(RadGrid1_ItemDataBound);
        RadGrid1.DataSourceID = "SqlDataSource1";
        RadGrid1.MasterTableView.DataKeyNames = new string[] { "CustomerID" };
        RadGrid1.Width = Unit.Percentage(98);
        RadGrid1.PageSize = 15;
        RadGrid1.AllowPaging = true;
        RadGrid1.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;
        RadGrid1.AutoGenerateColumns = false;
        RadGrid1.Skin = "Web20";
        //Add Customers table
        RadGrid1.MasterTableView.Width = Unit.Percentage(100);
        GridBoundColumn boundColumn;
        boundColumn = new GridBoundColumn();
        RadGrid1.MasterTableView.Columns.Add(boundColumn);
        boundColumn.DataField = "CustomerID";
        boundColumn.HeaderText = "CustomerID";
        boundColumn = new GridBoundColumn();
        RadGrid1.MasterTableView.Columns.Add(boundColumn);
        boundColumn.DataField = "ContactName";
        boundColumn.HeaderText = "Contact Name";
        string templateColumnName ="ColumnName";

        GridTemplateColumn templateColumn = new GridTemplateColumn();
        RadGrid1.MasterTableView.Columns.Add(templateColumn);
        templateColumn.ItemTemplate = new MyItemTemplate(templateColumnName);
        templateColumn.HeaderText = "templateColumnName";
        templateColumn.DataField = "CustomerID";

    }
}

void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem ditem = (GridDataItem)e.Item;
        string value = ((DataRowView)e.Item.DataItem)["ContactName"].ToString();
        if (value == "NEW")
        {
            Image img = (Image)ditem.FindControl("image1");
            img.ImageUrl = "~/Images/image2.png";
        }
    }
}
private class MyItemTemplate : ITemplate
{
    protected Image myimage;
    private string colname;
    public MyItemTemplate(string cName)
    {
        colname = cName;
    }
    public void InstantiateIn(System.Web.UI.Control container)
    {
        myimage = new Image();
        myimage.ImageUrl = "~/Images/image1.gif";  // Setting an image here works, but is the same for all cells
        myimage.ID = "image1";
        container.Controls.Add(myimage);
    }
}

Please provide your complete code so that i can replicate the issue.

Thanks,
Princy.

[Scott]

I took your version and made changes to it to match what I needed and it worked.  I am not sure which part of my original was causing the problem.  Thanks for the  help.