Custom Image in Grid Checkbox column

[Kevin]

Hello -  I am binding a radgrid to the results of a stored procedure.  Several of the returned columns are bool and the grid nicely renders checked versus unchecked.  My user group wants a "nice big green checkmark" instead of the standard greyed out checkmark.  I have the image.  I am just not sure how to tie it into the grid given that AutoGenerateColumns = true

Example:
DataTable dt;
dt = ResultsFromStoredProcedureMethod;
radgrid.datasource = dt;
radgrid.databind();

Any one know how I would accomplish this?  Should I be using a different approach?


Thank you,
Kevin

[Shinu]

Hi Kevin,

You can use the following code snippet in order to show custom image instead of default checkboxes when using AutoGenerated column.

CS:

    protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            item["MartalStatus"].Controls.Clear();

            Image imgChecked = new Image();
            imgChecked.ImageUrl = "../Images/img1.gif";
            Image imgUnchecked = new Image();
            imgUnchecked.ImageUrl = "../Images/img2.gif";

            DataRowView row = (DataRowView)item.DataItem;
            if (row["MaritalStatus"].ToString().ToUpper() == "TRUE")
            {
                item["MaritalStatus"].Controls.Add(imgChecked);
            }
            else
            {
                item["MaritalStatus"].Controls.Add(imgUnchecked);
            }
        }
    }

-Shinu.

[Kevin]

Thank you very much Shinu.  Much appreciated.

[RickC]

Thanks for the code.

I needed to do this in a Hierachical Table setup in RadGrid so there is another step required for anyone who needs to do that. You also have to name your DetailsTable and reference that in a new line in the same code as used above. Here it is in VB.

Here is a snippet of the RadGrid showing the DetailTable which is names

 <DetailTables>
        <telerik:GridTableView runat="server" AllowAutomaticDeletes="False"
            AllowAutomaticUpdates="False" DataSourceID="SQLDatasource2"
            DataKeyNames="CustomerID" Name="DetailTable1">

And of course there needs to be a OnItemDataBound="RadGrid2_ItemDataBound"> as part of the <telerik:RadGrid

Protected Sub RadGrid2_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs)
      'First have to tell it which Hierarchical Table
      If (e.Item.OwnerTableView.Name = "DetailTable1") Then
          'Now you can reference the individual item
          If TypeOf e.Item Is GridDataItem Then
              Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)
              item("Fulfilled").Controls.Clear()

              Dim imgChecked As New Image()
              imgChecked.ImageUrl = "../Images/green-check.gif"
              Dim imgUnchecked As New Image()
              imgUnchecked.ImageUrl = "../Images/redX.gif"

              Dim row As DataRowView = DirectCast(item.DataItem, DataRowView)
              If row("Fulfilled").ToString().ToUpper() = "TRUE" Then
                  item("Fulfilled").Controls.Add(imgChecked)
              Else
                  item("Fulfilled").Controls.Add(imgUnchecked)
              End If
          End If
      End If
  End Sub

[Edgar]

I got the same problem and i use the this code it works fine but i have some issue when a i do a post back it lost the custom image and show the default check uncheck images

[Shinu]

Hi,

Try adding the controls in ItemCreated event.
C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
if (e.Item is GridDataItem)
{
    GridDataItem item = (GridDataItem)e.Item;
    item["UniqueName"].Controls.Clear();

    Image imgChecked = new Image();
    imgChecked.ImageUrl = "../Images/img.gif";
    Image imgUnchecked = new Image();
    imgUnchecked.ImageUrl = "../Images/img.gif";


    if (item["UniqueName"].ToString().ToUpper() == "true")
    {
        item["UniqueName"].Controls.Add(imgChecked);
    }
    else
    {
        item["LastName"].Controls.Add(imgUnchecked);
    }
}

Thanks,
Shinu.

[Alex]

I am trying this and my images do not show. I still get the default checkboxes. The column I am targeting is this:

<telerik:GridCheckBoxColumn DataField="Flag" DataType="System.Boolean"
            FilterControlAltText="Checkmark = Subsidiary" HeaderText="Subsidiary"
            SortExpression="Flag" UniqueName="Flag">
        </telerik:GridCheckBoxColumn>

And my code-behind is this:

protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            if (e.Item is GridDataItem)
            {
                GridDataItem item = (GridDataItem)e.Item;
                item["Flag"].Controls.Clear();

                Image imgChecked = new Image();
                imgChecked.ImageUrl = "img/greenflag.jpg";
                Image imgUnchecked = new Image();
                imgUnchecked.ImageUrl = "img/redflag.jpg";


                if (item["Flag"].ToString().ToUpper() == "true")
                {
                    item["Flag"].Controls.Add(imgChecked);
                }
                else
                {
                    item["Flag"].Controls.Add(imgUnchecked);
                }
            }
        }

I have a "img" directory under the root of my project. Inside this directory are images named "greenflag.jpg" and "redflag.jpg"

[Galin]

Hi Alex,

I suggest you to use the integrated columns like GridClientSelectColumn or GridCheckBoxColumn as it is showed in this demo.
Then you can easy style the checkboxes with the RadFormDecorator.

I hope this helps.

All the best,
Galin
the Telerik team