Custom Image in Grid Checkbox column

8 posts, 0 answers
  1. Kevin
    Kevin avatar
    3 posts
    Member since:
    May 2009

    Posted 28 Apr 2010 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Apr 2010 Link to this post

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin
    Kevin avatar
    3 posts
    Member since:
    May 2009

    Posted 29 Apr 2010 Link to this post

    Thank you very much Shinu.  Much appreciated.
  5. RickC
    RickC avatar
    18 posts
    Member since:
    Apr 2003

    Posted 19 Apr 2012 Link to this post

    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
  6. Edgar
    Edgar avatar
    4 posts
    Member since:
    Nov 2012

    Posted 02 Nov 2012 Link to this post

    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
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Nov 2012 Link to this post

    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.
  8. Alex
    Alex avatar
    23 posts
    Member since:
    Dec 2012

    Posted 12 Mar 2013 Link to this post

    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"

  9. Galin
    Admin
    Galin avatar
    526 posts

    Posted 18 Mar 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017