This is a migrated thread and some comments may be shown as answers.

Hide image in template column?

6 Answers 114 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 29 Sep 2009, 12:06 PM
I have tried for days trying to do what seems would be simple but I cannot seem to get an image to hide in a column based on another columns value. Here is what I am trying to do.

  • I have a template column with the uniquename of "noteimgcolumn" inside this column I have a image "Bullet.gif"
  • I have another hidden column with the uniquename "Notes" which has user notes about this record which a user will update from time to time.
  • I have a Radtooltip assigned to the bullet.gif inside the template column which shows the notes for this particular record on mouseover.
  • I would like to hide the bullet.gif if the length of the note columns value is less than 10 "this is because on some imports from a spreadsheet will actually put in "NULL" into the notes field. I also need to hide the image if the note field is truly null.

I have tried every sample app you have supplied on the forums and still cannot get this to work It always shows the image. Below is the code for the page I do not have any code behind since none of what I tried was working.

<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True" 
                AllowSorting="True" 
                DataSourceID="SqlDataSource1" GridLines="None" ShowGroupPanel="True" 
                Skin="Office2007" AllowAutomaticInserts="True" AllowAutomaticDeletes="True"  AllowAutomaticUpdates="True" HorizontalAlign="Left" Width="100%">  
<ItemStyle HorizontalAlign="Center" /> 
 
<PagerStyle Position="TopAndBottom" Mode="NumericPages" /> 
 
<MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" ForeColor="Black" DataKeyNames="ContactID" CommandItemDisplay="Top" AllowPaging="True" editmode="PopUp" showfooter="True">  
<RowIndicatorColumn> 
<HeaderStyle Width="20px"></HeaderStyle> 
</RowIndicatorColumn> 
 
<ExpandCollapseColumn> 
<HeaderStyle Width="20px"></HeaderStyle> 
</ExpandCollapseColumn> 
<Columns> 
<telerik:GridEditCommandColumn HeaderImageUrl="./images/icon_edit_topic.gif" Resizable="False"></telerik:GridEditCommandColumn> 
<telerik:GridButtonColumn ConfirmTitle="Delete Confirmation" ConfirmDialogType="RadWindow" CommandName="Delete" Text="Delete" ImageUrl="/images/delete.gif" ConfirmText="Are you sure you want to delete record?" HeaderImageUrl="./images/delete.gif" HeaderText="Delete" Reorderable="False" UniqueName="column1"></telerik:GridButtonColumn> 
<telerik:GridTemplateColumn AllowFiltering="False" HeaderText="Notes" UniqueName="noteimgcolumn"><ItemTemplate> 
<ITEMTEMPLATE /><asp:Image id="Image1" runat="server" __designer:wfdid="w301" ImageUrl="~/images/bullet.gif"</asp:Image> &nbsp;<telerik:RadToolTip id="RadToolTip1" title="Contact Notes" runat="server" Skin="Office2007" Width="693px" Height="75px" sPosition="BottomLeft" __designer:wfdid="w302" TargetControlID="image1" RelativeTo="Element" Position="BottomRight" EnableTheming="False" AutoCloseDelay="5000" Animation="Resize" ShowDelay="100"><BR /><DIV style="BACKGROUND-IMAGE: url(Images/bg-fade.gif); WIDTH: 686px; HEIGHT: 141px; BACKGROUND-COLOR: yellow" align=left><asp:Label id="Label4" runat="server" Text='<%# Eval("FirstName") %>' __designer:wfdid="w303" Font-Size="Large" ForeColor="Red"></asp:Label> <asp:Label id="Label5" runat="server" __designer:wfdid="w304"></asp:Label> <asp:Label id="Label6" runat="server" Text='<%# Eval("LastName") %>' __designer:wfdid="w305" Font-Size="Large" ForeColor="Red"></asp:Label><BR /> 
<HR /> 
<asp:Label id="Label3" runat="server" Text="Note:" __designer:wfdid="w299" Font-Size="Medium" ForeColor="Maroon"></asp:Label><BR /><asp:Label id="Label7" runat="server" Text='<%# Eval("Notes") %>' Font-Bold="False" __designer:wfdid="w300" Font-Size="Medium" ForeColor="Blue" EnableTheming="True"></asp:Label><BR /><BR /><BR /><BR /><BR /><BR /><BR /></DIV></telerik:RadToolTip>   
</ItemTemplate> 
</telerik:GridTemplateColumn> 
<telerik:GridBoundColumn DataField="lastname" HeaderText="Last Name" UniqueName="column3"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name" UniqueName="column2"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="middlename" HeaderText="Middle Name" Visible="False" UniqueName="column4"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="suffix" HeaderText="Suffix" Visible="False" UniqueName="column6"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="Title" HeaderText="Title" SortExpression="Title" Visible="False" UniqueName="Title"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="JobTitle" HeaderText="JobTitle" SortExpression="JobTitle" Visible="False" UniqueName="JobTitle"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="Company" HeaderText="Company" SortExpression="Company" UniqueName="Company"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="Address" HeaderText="Address" UniqueName="column7"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="WorkFax" HeaderText="WorkFax" SortExpression="WorkFax" UniqueName="WorkFax"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="WorkPhone" HeaderText="WorkPhone" SortExpression="WorkPhone" UniqueName="WorkPhone"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="WorkPhoneExtension" HeaderText="WorkPhoneExtension" SortExpression="WorkPhoneExtension" Visible="False" UniqueName="WorkPhoneExtension"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="Address1" HeaderText="Address1" SortExpression="Address1" Visible="False" UniqueName="Address1"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="Address2" HeaderText="Address2" SortExpression="Address2" Visible="False" UniqueName="Address2"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="City" HeaderText="City" SortExpression="City" Visible="False" UniqueName="City"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="State" HeaderText="State" SortExpression="State" Visible="False" UniqueName="State"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="ZipCode" HeaderText="ZipCode" SortExpression="ZipCode" Visible="False" UniqueName="ZipCode"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="Country" HeaderText="Country" SortExpression="Country" Visible="False" UniqueName="Country"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="EmailAddress" HeaderText="EmailAddress" SortExpression="EmailAddress" Visible="False" UniqueName="EmailAddress"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="ContactID" ReadOnly="True" Visible="False" UniqueName="column5"></telerik:GridBoundColumn> 
<telerik:GridBoundColumn DataField="Notes" MaxLength="1000" HeaderText="Note" Visible="False" UniqueName="column"></telerik:GridBoundColumn> 
</Columns> 
 
<EditFormSettings> 
<EditColumn UniqueName="EditCommandColumn1"></EditColumn> 
</EditFormSettings> 
 
<ItemStyle HorizontalAlign="Left" Wrap="True" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False"></ItemStyle> 
 
<GroupHeaderItemStyle HorizontalAlign="Left" Wrap="True" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False"></GroupHeaderItemStyle> 
 
<AlternatingItemStyle HorizontalAlign="Left" Wrap="True" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False"></AlternatingItemStyle> 
 
<EditItemStyle HorizontalAlign="Left" Wrap="True" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False"></EditItemStyle> 
 
<PagerStyle Mode="NextPrevNumericAndAdvanced" PageButtonCount="20" Position="TopAndBottom" HorizontalAlign="Left" Wrap="True" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False"></PagerStyle> 
 
<HeaderStyle HorizontalAlign="Center" Wrap="True" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False"></HeaderStyle> 
</MasterTableView> 
 
<ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" ReorderColumnsOnClient="True">  
<Selecting AllowRowSelect="True"></Selecting> 
</ClientSettings> 
 
<FilterMenu EnableTheming="True" Skin="Hay">  
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
</FilterMenu> 
 
<EditItemStyle BackColor="White" HorizontalAlign="Left" /> 
 
<FilterItemStyle HorizontalAlign="Center" /> 
</telerik:RadGrid> 
Thanks in advance.

6 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 1
answered on 29 Sep 2009, 01:03 PM
Hello Robert,

I tried the following code to achieve your scenario and its working as expected. Check for any differences with your code:
c#:
 protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e) 
    { 
        if (e.Item is GridDataItem) 
        { 
            GridDataItem item = (GridDataItem)e.Item; 
            if (item["column"].Text.Length < 10) 
            { 
                ((Image)item.FindControl("Image1")).Visible = false
            }         
        } 
    } 

Hope this helps..
Princy.
0
Robert
Top achievements
Rank 1
answered on 29 Sep 2009, 01:13 PM
Thanks for the quick reply Princy

I have converted your code to VB

 Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs)  
 
        If TypeOf e.Item Is GridDataItem Then  
            Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)  
            If item("Notes").Text.Length < 10 Then  
            (DirectCast(item.FindControl("Image1"), Image)).Visible = False 
            End If  
        End If  
 
    End Sub 
However I am getting a compilation error from the codebehind

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: BC30035: Syntax error.

Source Error:

Line 106:            Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)
Line 107:            If item("Notes").Text.Length < 10 Then
Line 108: (DirectCast(item.FindControl("Image1"), Image)).Visible = FalseLine 109:            End If
Line 110:        End If
0
Robert
Top achievements
Rank 1
answered on 29 Sep 2009, 01:26 PM

I fixed the compilation error

 Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs)  
 
        If TypeOf e.Item Is GridDataItem Then  
            Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)  
            If item("Notes").Text.Length < 10 Then  
                DirectCast(item.FindControl("Image1"), Image).Visible = False 
            End If  
        End If  
 
    End Sub 

However the image still shows on all records would this be because the actual notes field is not visible, if this is the case how would I handle getting the value from the db field instead of the column.
0
Robert
Top achievements
Rank 1
answered on 29 Sep 2009, 01:42 PM
I have found a couple of things

  • I changed the column unique name to "Notes" so that it would match my codebehind
  • I made the column visible "just for testing"

The image1 still shows on all records even though most records only have 4 characters in the notes field

0
Martin
Telerik team
answered on 01 Oct 2009, 10:06 AM
Hello Robert,

I am attaching a sample project demonstrating how to hide an Image control inside a TemplateColumn based on the length of the text in a DataBoundColumn.

I hope this helps.

Regards,
Martin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Robert
Top achievements
Rank 1
answered on 01 Oct 2009, 02:20 PM
I am very sorry to waste your time your solution was correct. I am a complete idiot but sometimes the simplest of things cause the most trouble. The problem the whole time was that I did not assign the itemdatabound event !
Tags
Grid
Asked by
Robert
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Robert
Top achievements
Rank 1
Martin
Telerik team
Share this question
or