Does anyone know how to get an image in a hyperlink column in a datagrid? Or is it even possible?

 

 Hi,

 

Try setting the HeaderText property to something like this:

<asp:HyperLinkField HeaderText="<img src='myimage.jpg'/>" .... 

 

Andrei

 DataGrid or GridView?

Also, do you want the image in teh DataRow or the HeaderRow?

If you want an image to be used for a link, I think you'll have to use a template field.

If a DataGrid, try this:

    <asp:DataGrid runat="server" ID="DG1">
    <Columns>
    <asp:HyperLinkColumn HeaderImageUrl='<%# Eval("someImagePath") %>' DataNavigateUrlField='<%# Eval("someNaviagteURL") %>' DataTextField='<%# Eval("someText") %>' />
    <asp:TemplateColumn>
    <ItemTemplate>
    <asp:HyperLink runat="server" ID="HL1" ImageUrl='<%# Eval("someImagePath") %>' Text='<%# Eval("someText") %>' NavigateUrl='<%# Eval("someNaviagteURL") %>' />
    </ItemTemplate>
    </asp:TemplateColumn>
    </Columns>
    </asp:DataGrid>

A GridView is essentially the same, only it would be <asp:HyperLinkField> and <asp:TemplateField>

 Hi,

 

"Try setting the HeaderText property to something like this:

<asp:HyperLinkField HeaderText="<img src='myimage.jpg'/>" ....  "

 

I am wanting to use the image for the item or data and not the header.

 

Thanks

Then try this:

     <asp:TemplateColumn>
    <ItemTemplate>
    <asp:HyperLink runat="server" ID="HL1" ImageUrl='<%# Eval("someImagePath") %>' Text='<%# Eval("someText") %>' NavigateUrl='<%# Eval("someNaviagteURL") %>' />
    </ItemTemplate>
    </asp:TemplateColumn>

or, for GridView

    <asp:TemplateField>
    <ItemTemplate>
    <asp:HyperLink runat="server" ID="HL1" ImageUrl='<%# Eval("someImagePath") %>' Text='<%# Eval("someText") %>' NavigateUrl='<%# Eval("someNaviagteURL") %>' />
    </ItemTemplate>
    </asp:TemplateField>

The "Evals" will get the data from your data source and allow you to use an image with the HyperLink.

Convert the bound column to a template column, using the property builder in the VS.NET IDE (or do it yourself in the HTML of the aspx page). Then you can add an image control to the template column (to edit the template column in the IDE, right click on it and choose the appropriate option (Edit Templates I think)). To get the flag image, you could write a small function in your codebehine, make sure its protected so the aspx page can access it. Call this function from a databinding statement in the datagrid template column for the country, in the image control - something like . (This should go in the ImageURL part of the asp.net image control - i.e. ImageURL="").

grkshines:

Convert the bound column to a template column, using the property builder in the VS.NET IDE (or do it yourself in the HTML of the aspx page). Then you can add an image control to the template column (to edit the template column in the IDE, right click on it and choose the appropriate option (Edit Templates I think)). To get the flag image, you could write a small function in your codebehine, make sure its protected so the aspx page can access it. Call this function from a databinding statement in the datagrid template column for the country, in the image control - something like . (This should go in the ImageURL part of the asp.net image control - i.e. ImageURL="").

 

THe problem I am having is I want to use the image as a link and I can't do that in a template column or at lease I don't think.  I have an id field as a datanavigateurlfield and that is why I am using a hyperlinkcolumn but I can't use an ImageURL in a Hyperlink field. In a template column I can't use a urlfield to link to the image. As you can see in the code below. I have a template column that is not a link(which is how it should be) and a hyperlink column with no image.

This is the code I have:

<asp:DataGrid ID="PortProvGrid" GridLines="Both" runat="server" AutoGenerateColumns="False"

Visible="True" Width="728px">

<Columns>

 

<asp:BoundColumn DataField="facility" HeaderText="Facility" HeaderStyle-Font-Bold="true" ItemStyle-Wrap="false"></asp:BoundColumn>

<asp:BoundColumn DataField="distance" HeaderText="Distance" HeaderStyle-Font-Bold="true" ItemStyle-Wrap="false"></asp:BoundColumn>

<asp:TemplateColumn ItemStyle-HorizontalAlign="Center" >

<ItemTemplate >

<asp:HyperLink ID="hlThumbnails" ImageUrl='<%# "images/" & cstr(DataBinder.Eval(Container.DataItem, "Network_Logo_1"))%>' runat="server"></asp:HyperLink>

</ItemTemplate>

</asp:TemplateColumn>

<asp:HyperLinkColumn DataNavigateUrlField="ID" DataNavigateUrlFormatString="javascript:var w=window.open('authorizationform.aspx?ID={0}','');"

Text="Auth Form"></asp:HyperLinkColumn>

 

 

</Columns>

<PagerStyle BackColor="#990033" Font-Bold="True" Font-Names="Verdana" Font-Size="Smaller"

ForeColor="White" HorizontalAlign="Right" NextPageText="Next Page" Position="TopAndBottom"

PrevPageText="Previous Page" VerticalAlign="Middle" />

</asp:DataGrid>

 

 

 Try changing the HyperLink in the Template to this:

 <asp:TemplateColumn ItemStyle-HorizontalAlign="Center" >

<ItemTemplate >

<asp:HyperLink ID="hlThumbnails" NavigateUrl='<%# "javascript:var w=window.open('authorizationform.aspx?ID=" & cstr(DataBinder.Eval(Container.DataItem, "ID")) & "'"%>' ImageUrl='<%# "images/" & cstr(DataBinder.Eval(Container.DataItem, "Network_Logo_1"))%>' runat="server"></asp:HyperLink>

</ItemTemplate>

</asp:TemplateColumn>

In other words, do something very similar to what you did with the ImageUrl, but in the NavigateUrl and using the ID field.  Try that and see if it works.

 

mckrecker:

 Try changing the HyperLink in the Template to this:

 <asp:TemplateColumn ItemStyle-HorizontalAlign="Center" >

<ItemTemplate >

<asp:HyperLink ID="hlThumbnails" NavigateUrl='<%# "javascript:var w=window.open('authorizationform.aspx?ID=" & cstr(DataBinder.Eval(Container.DataItem, "ID")) & "'"%>' ImageUrl='<%# "images/" & cstr(DataBinder.Eval(Container.DataItem, "Network_Logo_1"))%>' runat="server"></asp:HyperLink>

</ItemTemplate>

</asp:TemplateColumn>

In other words, do something very similar to what you did with the ImageUrl, but in the NavigateUrl and using the ID field.  Try that and see if it works.

 

 

I don't know if the NavigateURL will work. I have tried several different ways and I get 'The server tag is not well formed.' error.

 Then instead of doing it inline, use the code behind.

 After I sent that reply I tried it and got a the same problem.  Rather than figure out the right way form the tag, I swithced to using the code behind and it worked perfectly.

To the DataGird, add the following

<asp:DataGrid OnItemDataBound="PortProvGrid_ItemDataBound" ID="PortProvGrid" GridLines="Both" runat="server" AutoGenerateColumns="False" Visible="True" Width="728px">

In the code behind, if using C#, add this:

  protected void gv2_RowDataBound(object sender, DataGridItemEventArgs e)
  {
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    //this makes sure we only apply this to rows that have data
    {
      DataRowView drv = (DataRowView)e.Item.DataItem;
      HyperLink hl = (HyperLink)e.Item.FindControl("hlThumbnails");
      hl.NavigateUrl="javascript:var w=window.open('authorizationform.aspx?ID=" + drv["ID"].ToString() + "')";
    }
  }

If you're using VB, then search MSDN for "DataGridItem ItemDataBound" for the equivalent: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.datagriditem.dataitem.aspx

ALSO -- please note I use GridViews mostly, not datagrids, so I tried to make sure I got the syntax right for datagrids, but may have made a mistake. The above worked for me using a grdiview, so it should work with some modifications to a datagrid.

mckrecker:

 Then instead of doing it inline, use the code behind.

 After I sent that reply I tried it and got a the same problem.  Rather than figure out the right way form the tag, I swithced to using the code behind and it worked perfectly.

To the DataGird, add the following

<asp:DataGrid OnItemDataBound="PortProvGrid_ItemDataBound" ID="PortProvGrid" GridLines="Both" runat="server" AutoGenerateColumns="False" Visible="True" Width="728px">

In the code behind, if using C#, add this:

  protected void gv2_RowDataBound(object sender, DataGridItemEventArgs e)
  {
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    //this makes sure we only apply this to rows that have data
    {
      DataRowView drv = (DataRowView)e.Item.DataItem;
      HyperLink hl = (HyperLink)e.Item.FindControl("hlThumbnails");
      hl.NavigateUrl="javascript:var w=window.open('authorizationform.aspx?ID=" + drv["ID"].ToString() + "')";
    }
  }

If you're using VB, then search MSDN for "DataGridItem ItemDataBound" for the equivalent: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.datagriditem.dataitem.aspx

ALSO -- please note I use GridViews mostly, not datagrids, so I tried to make sure I got the syntax right for datagrids, but may have made a mistake. The above worked for me using a grdiview, so it should work with some modifications to a datagrid.

Sorry for the delay. This worked.

 

Thanks