Hide image in template column?

[Robert]

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.

[Princy]

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.

[Robert]

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

[Robert]

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.

[Robert]

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

[Martin]

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.

[Robert]

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 !