hyperlinks in gridview in asp.net

I am working with a gridview control in asp.net and in that gridview I have last column as a hyperlink. what i want to do is when user clicks on the link I want the new page to show up on the same page and not another page. so how i want is when the user clicks on the link the grid should still be there on top of the page and then I can i have kind of a frame or something on bottom of the grid and upon click the new page shouuld open up in that frame and it should not redirect it to another page.
pratikshahseAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
YZlatConnect With a Mentor Commented:
try this:

<asp:GridView ID="justificationGrid" runat="server"
        AutoGenerateColumns="False"  >
        <Columns>
            <asp:BoundField DataField="serviceid" HeaderText="Service" Visible=false />
            <asp:BoundField DataField="servicename" HeaderText="Service" />
            <asp:BoundField DataField="provider" HeaderText="Provider" />
            <asp:BoundField DataField="procedurecode" HeaderText="Procedure" />
            <asp:BoundField DataField="New" HeaderText="New" />
            <asp:BoundField DataField="Old_Amount" HeaderText="Old Budget" />
            <asp:BoundField DataField="New_Amount" HeaderText="New Budget" />
            <asp:BoundField DataField="Difference" HeaderText="Difference" />
            <asp:HyperLinkField HeaderText="Notes/Attachments"
    DataTextField="serviceid"
    DataTextFormatString="View"
    DataNavigateUrlFields="serviceid"
    DataNavigateUrlFormatString="/apd/_controls/notes/notesdata.aspx?id={0}&ParentEntity=1"
    Target="justificationframe" />


 
        </Columns>
    </asp:GridView>


    <iframe id="justificationframe" name="justificationframe" runat="server" width="500" visible="true" ></iframe>

The key is specifying the Target attribute of HyperLinkField as your iframe name and setting both id and name attributes of an iframe to frame's name
0
 
ghayasurrehmanCommented:
you should not use server control
use template column and add manual

<a href='link' target='_blank'>click here</a>
0
 
YZlatCommented:
if you want the new page to show up in the same window and not another window, make sure you do not use target="_blank"
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
YZlatCommented:
<asp:HyperLinkField DataNavigateUrlFields="ID"
 DataNavigateUrlFormatString="NewPage.aspx?id={0}"
                    DataTextField="YourField" NavigateUrl="NewPage.aspx" />
0
 
YZlatCommented:
oh I see. You might have to do that from code behind and use iFrame to display another page
0
 
YZlatCommented:
or you could Utilize AJAX and UpdatePanel. Are you using AJAX?
0
 
pratikshahseAuthor Commented:
no i am not using ajax
0
 
ghayasurrehmanCommented:
use datarowbound event


private void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
Hyperlink hl = (Hyperlink) e.Cell[<index of your column>].FindControl("hyperlink");
hl.Attributes.Add("onclick","window.open('url')");
hl.NavigateUrl = "#";
    }

Open in new window

0
 
YZlatCommented:
If I understood you correctly, you will have a templatecolumn in your gridview with a hyperlink:

<asp:TemplateField HeaderText="Link">
    <ItemTemplate>
   
               <asp:HyperLink ID="Hyperlink1" runat="server" NavigateUrl="#" Text='<%#Eval("MyField") %>' />

    </ItemTemplate>
       </asp:TemplateField>

Then you will need to add an iFrame to your page:

<iframe id="myFrame" runat="server" width="500">
       
        </iframe>

And then you add the following to your code-behind file:

 public void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    HtmlControl frame1 = (HtmlControl)this.FindControl("myFrame");

    if (e.Row.RowType == DataControlRowType.DataRow)
    {
       
            HyperLink hl = (HyperLink)e.Row.FindControl("HyperLink1");
     
        frame1.Attributes["src"]="NewPage.aspx?ID=" + DataBinder.Eval(e.Row.DataItem, "ID");
 
    }
}
0
 
pratikshahseAuthor Commented:
thanks all for the comments but in my case I am binding data to my grid from a datatable which is created on the fly from code behind.

my aspx code is something like this

    <asp:GridView ID="justification_grid" runat="server"
        AutoGenerateColumns="False" >
        <Columns>
            <asp:BoundField DataField="serviceid" HeaderText="Service" Visible=false />
            <asp:BoundField DataField="servicename" HeaderText="Service" />
            <asp:BoundField DataField="provider" HeaderText="Provider" />
            <asp:BoundField DataField="procedurecode" HeaderText="Procedure" />
            <asp:BoundField DataField="New" HeaderText="New" />
            <asp:BoundField DataField="Old_Amount" HeaderText="Old Budget" />
            <asp:BoundField DataField="New_Amount" HeaderText="New Budget" />
            <asp:BoundField DataField="Difference" HeaderText="Difference" />
            <asp:HyperLinkField Text="View" HeaderText="Notes/Attachments" DataNavigateUrlFields="serviceid" DataNavigateUrlFormatString="/apd/_controls/notes/notesdata.aspx?id={0}&ParentEntity=1" />
        </Columns>
    </asp:GridView>


the way i bind it to a grid is


                this.justification_grid.DataSource = GridTable.DefaultView;
                this.justification_grid.DataBind();


Gridtable is the datatable that i create on the fly.  how do i make  the link to open up in an iframe on the same page.
<asp:HyperLinkField Text="View" HeaderText="Notes/Attachments" DataNavigateUrlFields="serviceid" DataNavigateUrlFormatString="/apd/_controls/notes/notesdata.aspx?id={0}&ParentEntity=1" />





0
 
pratikshahseAuthor Commented:
ok i was able to get to the rowdatabound and mygrid_RowDataBound(object sender, GridViewRowEventArgs e)
but since i cannot have an id or name for my hyperlinkcolumn in the gridview how do i resolve this statement

  HyperLink hl = (HyperLink)e.Row.FindControl("HyperLink1");

for me .FindControl is not going to work i am not able to give an id or name to my hyperlink column in my gridview

0
 
ghayasurrehmanCommented:
the name is not for the column, this is the name of the hyperlink contorl you have added in the grid
0
 
ghayasurrehmanCommented:
use the following code
protected void justification_grid_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        ((HyperLink)e.Row.Cells[7].FindControl("Hyperlink1")).Attributes.Add("target", "_blank");
    }



<asp:GridView ID="justification_grid" runat="server" 
        AutoGenerateColumns="False" onrowdatabound="justification_grid_RowDataBound" >
        <Columns>
            <asp:BoundField DataField="serviceid" HeaderText="Service" Visible=false />
            <asp:BoundField DataField="servicename" HeaderText="Service" />
            <asp:BoundField DataField="provider" HeaderText="Provider" />
            <asp:BoundField DataField="procedurecode" HeaderText="Procedure" />
            <asp:BoundField DataField="New" HeaderText="New" />
            <asp:BoundField DataField="Old_Amount" HeaderText="Old Budget" />
            <asp:BoundField DataField="New_Amount" HeaderText="New Budget" />
            <asp:BoundField DataField="Difference" HeaderText="Difference" />
            <asp:TemplateField HeaderText="Notes/Attachments">
                <ItemTemplate>
                    <asp:HyperLink ID="HyperLink1" runat="server"                     
                        NavigateUrl='<%# Eval("serviceid", "/apd/_controls/notes/notesdata.aspx?id={0}&ParentEntity=1") %>' 
                        Text="View"></asp:HyperLink>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Open in new window

0
 
YZlatCommented:
you will have to use TemplateColumn as I showed you in my example instead of  <asp:HyperLinkField Text="View" HeaderText="Notes/Attachments" DataNavigateUrlFields="serviceid" DataNavigateUrlFormatString="/apd/_controls/notes/notesdata.aspx?id={0}&ParentEntity=1" />
0
 
YZlatCommented:
otherwise you won't be able to use my code
0
 
YZlatCommented:
There is another way, you can reference the column through control index but it's not recommended. I'd strongly recommend using TemplateField
0
 
ghayasurrehmanCommented:
change the index from 7 to 8 in server side code
protected void justification_grid_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        ((HyperLink)e.Row.Cells[8].FindControl("Hyperlink1")).Attributes.Add("target", "_blank");
    }

Open in new window

0
 
YZlatCommented:
<asp:GridView ID="justification_grid" runat="server"
        AutoGenerateColumns="False" >
        <Columns>
            <asp:BoundField DataField="serviceid" HeaderText="Service" Visible=false />
            <asp:BoundField DataField="servicename" HeaderText="Service" />
            <asp:BoundField DataField="provider" HeaderText="Provider" />
            <asp:BoundField DataField="procedurecode" HeaderText="Procedure" />
            <asp:BoundField DataField="New" HeaderText="New" />
            <asp:BoundField DataField="Old_Amount" HeaderText="Old Budget" />
            <asp:BoundField DataField="New_Amount" HeaderText="New Budget" />
            <asp:BoundField DataField="Difference" HeaderText="Difference" />
<asp:TemplateField HeaderText="Notes/Atatchments">
               <ItemTemplate>
   
               <asp:HyperLink ID="Hyperlink1" runat="server" NavigateUrl="#" Text='<%#Eval("servicename") %>' />

    </ItemTemplate>
       </asp:TemplateField>
                    </Columns>
    </asp:GridView>

0
 
pratikshahseAuthor Commented:
when i click on "View" it still tries to open a page on another page. i want it to open in the iframe on the same page.
0
 
YZlatCommented:
can you post your code?

it does that because you need to set DataNavigateUrlFormatString to nothing:

DataNavigateUrlFormatString="#"
or NavigateUrl="#"

0
 
YZlatCommented:
if you used my suggestion it would open it inside the iframe. My code worked for me
0
 
ghayasurrehmanCommented:
now use this and remove the server side code
<script language="javascript" type="text/javascript">
        function openFrame(url) {

            document.getElementById('iframeId').src = url;
        }
    </script>
    
     <asp:GridView ID="justification_grid" runat="server" 
        AutoGenerateColumns="False" onrowdatabound="justification_grid_RowDataBound" >
        <Columns>
            <asp:BoundField DataField="serviceid" HeaderText="Service" Visible=false />
            <asp:BoundField DataField="servicename" HeaderText="Service" />
            <asp:BoundField DataField="provider" HeaderText="Provider" />
            <asp:BoundField DataField="procedurecode" HeaderText="Procedure" />
            <asp:BoundField DataField="New" HeaderText="New" />
            <asp:BoundField DataField="Old_Amount" HeaderText="Old Budget" />
            <asp:BoundField DataField="New_Amount" HeaderText="New Budget" />
            <asp:BoundField DataField="Difference" HeaderText="Difference" />
            <asp:TemplateField HeaderText="Notes/Attachments">
                <ItemTemplate>
                    <asp:HyperLink ID="HyperLink1" runat="server"                     
                        NavigateUrl='javascript:openFrame("<%# Eval("serviceid", "/apd/_controls/notes/notesdata.aspx?id={0}&ParentEntity=1") %>");' 
                        Text="View"></asp:HyperLink>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Open in new window

0
 
pratikshahseAuthor Commented:
ghayasurrehman :

i am trying to use your above code sample and it gives me a javascript error saying expect '('

i thiink you are very close just one issue and it should be solved. please help me out.



YZlat: I tried using yours too but it gives me web page of the last link in the my grid view. and when i click on other links nothing happens.

Here is my code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="justification.aspx.cs" Inherits="justification" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" type="text/javascript">
    function openFrame(url) {

        document.getElementById('justificationframe').src = url;
    }
    </script>


<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="template.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    </div>

<asp:GridView ID="justificationGrid" runat="server"
        AutoGenerateColumns="False"  >
        <Columns>
            <asp:BoundField DataField="serviceid" HeaderText="Service" Visible=false />
            <asp:BoundField DataField="servicename" HeaderText="Service" />
            <asp:BoundField DataField="provider" HeaderText="Provider" />
            <asp:BoundField DataField="procedurecode" HeaderText="Procedure" />
            <asp:BoundField DataField="New" HeaderText="New" />
            <asp:BoundField DataField="Old_Amount" HeaderText="Old Budget" />
            <asp:BoundField DataField="New_Amount" HeaderText="New Budget" />
            <asp:BoundField DataField="Difference" HeaderText="Difference" />
            <asp:TemplateField HeaderText="Notes/Attachments">
                <ItemTemplate>
                    <asp:HyperLink ID="HyperLink1" runat="server"                    
                        NavigateUrl='javascript:openFrame("<%# Eval("serviceid", "/apd/_controls/notes/notesdata.aspx?id={0}&ParentEntity=1") %>");'
                        Text="View"></asp:HyperLink>
                </ItemTemplate>
            </asp:TemplateField>

        </Columns>
    </asp:GridView>

    <%--            <asp:HyperLinkField Text="View" HeaderText="Notes/Attachments" DataNavigateUrlFields="serviceid" DataNavigateUrlFormatString="/apd/_controls/notes/notesdata.aspx?id={0}&ParentEntity=1" />
--%>    
    <iframe id="justificationframe" runat="server" width="500" visible="true" ></iframe>

    </form>
</body>
</html>


0
 
YZlatCommented:
change your page to this:



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="justification.aspx.cs" Inherits="justification" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="template.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    </div>

<asp:GridView ID="justificationGrid" runat="server"
        AutoGenerateColumns="False"  >
        <Columns>
            <asp:BoundField DataField="serviceid" HeaderText="Service" Visible=false />
            <asp:BoundField DataField="servicename" HeaderText="Service" />
            <asp:BoundField DataField="provider" HeaderText="Provider" />
            <asp:BoundField DataField="procedurecode" HeaderText="Procedure" />
            <asp:BoundField DataField="New" HeaderText="New" />
            <asp:BoundField DataField="Old_Amount" HeaderText="Old Budget" />
            <asp:BoundField DataField="New_Amount" HeaderText="New Budget" />
            <asp:BoundField DataField="Difference" HeaderText="Difference" />
<asp:TemplateField HeaderText="Notes/Atatchments">
               <ItemTemplate>
   
               <asp:HyperLink ID="Hyperlink1" runat="server" NavigateUrl="#" Text='View' />

    </ItemTemplate>
       </asp:TemplateField>

         

        </Columns>
    </asp:GridView>

   
    <iframe id="justificationframe" runat="server" width="500" visible="true" ></iframe>

    </form>
</body>
</html>


and then add the following in your code-behind file:



public void justificationGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
    HtmlControl frame1 = (HtmlControl)this.FindControl("justificationframe");

    if (e.Row.RowType == DataControlRowType.DataRow)
    {
       
            HyperLink hl = (HyperLink)e.Row.FindControl("HyperLink1");
     
        frame1.Attributes["src"]="="/apd/_controls/notes/notesdata.aspx?id=" + DataBinder.Eval(e.Row.DataItem, "serviceid");
 
    }
}


and add this to your Page_Load event:

this.justificationGrid.RowDataBound += new EventHandler(justificationGrid_RowDataBound);.
0
 
pratikshahseAuthor Commented:
YZlat,

thanks for the code but your code still puts the last link in the iframe when the page is loaded. and on clicking other "View" links it does not do anything. What I want is on pageload the iframe should be empty and on clicking the links the iframe should be populated.

also the page load code is erroring as its asking for parameters to be passed

and add this to your Page_Load event:

this.justificationGrid.RowDataBound += new EventHandler(justificationGrid_RowDataBound);.


any other suggestions. i really appreciate your time in this matter.
0
 
YZlatCommented:
0
 
YZlatCommented:
Did it work for you?
0
 
pratikshahseAuthor Commented:
YZlat,

Thanks a lot for all your help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.