Display different Image in ItemTemplate column

[Kurt Kluth]

I would like to show a different image if another column in the grid is populated. 

 If Upload_date is populated I would like to display pdficon_down.gif else display pdf-icon.jpg.  How would I go about doing this?

<telerik:GridTemplateColumn HeaderText="Work Papers">
    <ItemTemplate>
            <img runat="server" id="WorkPaperImg" alt="Download or upload work papers for this audit." src="/images/pdficon_down.gif" onclick="openWorkPapers('<%= _hdnAuditID.Value %>', '<%#Eval("Date").ToString%>');" />
            <img alt="Download or upload work papers for this audit." src="/images/pdf-icon.png" onclick="openWorkPapers('<%= _hdnAuditID.Value %>', '<%#Eval("Date").ToString%>');" />

</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn HeaderText="Workpaper Uploaded" DataField="upload_date">
</telerik:GridBoundColumn>

 

 

 

[Kurt Kluth]

Possible solution?

[Eyup]

Hi Kurt,

You can use server-side Image controls to achieve this requirement. I am sending a sample RadGrid web site resembling your scenario. Please run the attached application and let me know if it helps you.

Regards,
Eyup
Telerik

 

 

[Kurt Kluth]

Eyup,

 That was nice and proved to be quite helpful.  One last question.  When a user clicks on the image I need it to launch a JavaScript function called openWorkPapers(AuditID, Date).  I have attempted a solution but I can't seem to get it to open.  Might you take a look at what I might be doing wrong?  Without the PostBackURL being what it is, it will fire a server-side event. 

Javascript

function openWorkPapers(auditId, date) {
    var oWnd = $find("<%= _rwWorkPapers.ClientID%>");
    oWnd.setUrl("/CUTracking/Auditing/WorkPapers.aspx?Date=" + date + "&AuditID=" + auditId);
    sizeRadWindow(oWnd,50,50);
    oWnd.show();
}

ASPX code

<telerik:GridTemplateColumn HeaderText="Work Papers" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" UniqueName="WorkPapers">
    <ItemTemplate>
        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/images/pdf-icon.png"
            CommandName="InActivate" Visible='<%# Eval("upload_date").ToString = ""%>'
            AlternateText="Upload work papers for this audit date." PostBackUrl="javascript:void(0);" />
        <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="/images/pdf-download-icon.png"
            CommandName="InActivate" Visible='<%# Eval("upload_date").ToString <> ""%>'
            AlternateText="Download work papers for this audit date." PostBackUrl="javascript:void(0);" />
</ItemTemplate>
</telerik:GridTemplateColumn>

ASPX.VB code

Private Sub _grdAsiAuditNotes_ItemDataBound(sender As Object, e As GridItemEventArgs) Handles _grdAsiAuditNotes.ItemDataBound
    If TypeOf e.Item Is Telerik.Web.UI.GridDataItem Then
        Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)

        Dim imgbtn As ImageButton = DirectCast(item("WorkPapers").FindControl("ImageButton1"), ImageButton)
        imgbtn.Attributes.Add("OnClientClick", "javascript:openWorkPapers('" + _hdnAuditID.Value + "', '" + DataBinder.Eval(e.Item.DataItem, "Date").ToString + "');")

        Dim imgbtn2 As ImageButton = DirectCast(item("WorkPapers").FindControl("ImageButton2"), ImageButton)
        imgbtn2.Attributes.Add("OnClientClick", "javascript:openWorkPapers('" + _hdnAuditID.Value + "', '" + DataBinder.Eval(e.Item.DataItem, "Date").ToString + "');")
    End If
End Sub

 

 

 

 

[Kurt Kluth]

Got things figured out.  Changed OnClientClick to OnClick.

[Eyup]

Hello Kurt,

I'm glad the provided sample has proven helpful.
You can also use the following approach in similar scenarios:

imgbtn.OnClientClick = "functionName(); return false;";

Regards,
Eyup
Telerik