Hide/show Hyperlinks

[Andrew M]

I am uploading images to a database and only want to show a hyperlink if an image was uploaded.

If a user does not upload a file to the database, I write a null to the "FileBytes" field and in the stored procedure code check for nulls. If a null is found, then I don't update the FileBytes field. This works ok for files already uploaded but if no file has been uploaded, then i get an error when the user click the hypelink in the grid.

In my aspx page i have the following markup inside a Grid:

 

........
</telerik:GridTemplateColumn>

 

 

 

<telerik:GridTemplateColumn HeaderText="Image" UniqueName="Upload">

 

 

 

    <ItemTemplate>

 

 

 

        <a href="#" onclick='ShowImage("<%# Eval("UID") %>");return false;'>

 

 

 

        <asp:Image runat="server" ID="ImageThumbnail" AlternateText="Click here to open the real size image"

 

 

 

        ImageUrl='<%# "showimagecs.aspx?thumbnail=true&ID=" + Eval("UID")%>' Style="border-width: 0px;" />

 

 

 

        </a>

 

 

 

    </ItemTemplate>

 

 

 

</telerik:GridTemplateColumn>

 

 

........

How can i hide the click able link if the 'FileBytes' field is empty so the user can't click the link and get an error ie what's the best way of showing a grid cell with nothing in it?

Kind regards
Andrew

[Todd Anglin]

One of the easiest solutions is to simply use a function to dynamic create the contents of your ItemTemplate, like this:

<telerik:GridTemplateColumn...

<ItemTemplate>

<%# renderImageLink(Eval("UID"), Eval("FileBytes")) %>

</ItemTemplate>

...

Then, in your server code, you'd do something like:

public string renderImageLink(int uid, object filebytes){

if(filebytes == null)

return String.Empty;

//Otherwise, build your HTML string and return

}

There are other approaches, of course, such as handling the Grid's OnItemDataBound event and programmatically manipulating your cell contents. Give this approach a try, though, and let me know if it helps.

-Todd

[Andrew M]

Thanks for your reply Todd.
I've gone ahead and applied your suggestion. It now works for when there is no image... ie the hyperlink doesn't show.
However, when there is an image, it's now not showing it in the grid as a thumbnail.

This is my original code. This shows the thumbnail image.

<

telerik:GridTemplateColumn HeaderText="Image" UniqueName="Upload">

 

 

<ItemTemplate>

 

 

    <a href="#" onclick='ShowImage("<%# Eval("UID") %>");return false;'>

 

 

    <asp:Image runat="server" ID="ImageThumbnail" AlternateText="Click here to open the real size image"

 

 

    ImageUrl='<%# "showimagecs.aspx?thumbnail=true&ID=" + Eval("UID")%>' Style="border-width: 0px;" />

 

 

    </a>

 

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

With the new suggestion, i now have this code on my aspx page 

 

 

<telerik:GridTemplateColumn HeaderText="Image" UniqueName="Upload">

 

 

<ItemTemplate>

 

        <%

# renderImageLink(Eval("UID"), Eval("FileBytes"))%>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

and this in the code behind

 

 

public string renderImageLink(Object uid, Object filebytes)

 

{

 

    if (filebytes.ToString().Length == 0)

 

 

        return "&nbsp;[no image test]";

 

 

        
    //Otherwise, build your HTML string and return

 

 

     string szStr = @"<a href=""#"" onclick='ShowImage(""" + uid;

 

    szStr = szStr +

@""");return false;'>";

 

    szStr = szStr +

@"<asp:Image runat=""server"" ID=""ImageThumbnail"" AlternateText=""Click here to open the real size image"" ";

 

    szStr = szStr +

@"ImageUrl='showimagecs.aspx?thumbnail=true&ID=" + uid + "' ";

 

    szStr = szStr +

@"Style=""border-width: 0px;"" /> ";

 

    szStr = szStr +

@"</a>[image test]";

 

 

    
    return szStr;

 

 

}

I've added the [no image test] and [image test] for debug. Even though no image is shown as a thumbnail, when i click [image test], i get to see the full size image in a popup window. Any thoughts?

Thanks
Andrew

 

[Todd Anglin]

Happy to hear you're getting closer.

The problem is that you cannot return a ASP.NET Server Control as a string. :) When you do, the server control is not parsed and thus does not display your image. Instead, return a standard HTML image control, like:

String.Format("<img src='showimagecs.aspx?thumbnail=true&ID={0}' alt='..' />", uid);

That will enable the browser to successfully parse your HTML and display your image.

Hope that helps.

-Todd

[Andrew M]

Sorry Todd but i'm lost now.
Can you please give me an example of what i need on the aspx page and the code behind page.

 

Thanks

Andrew

[Todd Anglin]

Sorry to confuse! Let me add more context to my last snippet and see if it helps. This is what the code should look like in your code behind file method that is returning the HTML for your "thumb cell":

public string renderImageLink(Object uid, Object filebytes)
{
    if (filebytes.ToString().Length == 0)
        return " [no image test]";

    //Otherwise, build your HTML string and return
    var szStr = new StringBuilder();
    szStr.AppendFormat("<a href=\"#\" onclick='ShowImage(\"{0}\");return false;'>", uid);

    szStr.AppendFormt("<img src=\"showimagecs.aspx?thumbnail=true&ID={0}\" alt=\"Click here to open the real size image\" style=\"border:none;\" />", uid);

    szStr.Append("</a>");

    return szStr.ToString();
}

The main idea is to simply return HTML from your method, not an ASP.NET Server Control. HTML can be processed by the browser- a ASP.NET Server Control cannot. Apologies if this doesn't compile- doing it free hand in the browser. This should put you on the right path, though.

Hope it helps.

-Todd

[Andrew M]

Excellent. Thanks Todd.