How to get the primary key value of the GridView rows in JavaScript or popup page?

SheoNarayan
Posted by in ASP.NET category on for Intermediate level | Points: 250 | Views : 55856 red flag
Rating: 4.67 out of 5  
 3 vote(s)

To get the primary ke value of the GridView records in JavaScript, we can follow this approach.

GridView

GridvIew control is a powerful data grid control that allows us to display the data in tabular format with sorting and pagination. It also allows us to manipulate the data.

Get hundreds of ASP.NET Tips and Tricks and ASP.NET Online training here.

In the previous article, we learnt about How to display mouseover effect on GridView rows using CSS? In this article, we shall learn how to get the primary key value of the GridView rows in JavaScript or popup page.

ASPX PAGE

<asp:GridView ID="GridView1" runat="server" EnableViewState="false" DataKeyNames="AutoId">

<Columns>

<asp:TemplateField HeaderText="Details">

<ItemTemplate>

<a href="javascript:void(0)" title="Click for more details"

onclick="OpenPopup('<%# Eval("AutoId") %>')">Details</a>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<script language="javascript" type="text/javascript">

function OpenPopup(autoid) {

alert("AutoId: " + autoid);

window.open("dummyPage.aspx?autoid=" + autoid, "", "width=300,height=200");

}

</script>

 

In the above code snippet, the code behind is simply to retrieve the data from the database and populate into the GridView.

On the .aspx page, we have added a TemplateField in which we have specified the html anchor tag with click event that fires OpenPopup JavaScript function. we have specified primary key (AutoId) as the OpenPopup parameter so that we can use it in this function.

CODE BEHIND

string _connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

GetData();

}

}

 

private void GetData()

{

DataTable table = new DataTable();

// get the connection

using (SqlConnection conn = new SqlConnection(_connStr))

{

// write the sql statement to execute

string sql = "SELECT AutoId, FirstName, LastName, Age, Active FROM PersonalDetail ORDER By AutoId";

// instantiate the command object to fire

using (SqlCommand cmd = new SqlCommand(sql, conn))

{

// get the adapter object and attach the command object to it

using (SqlDataAdapter ad = new SqlDataAdapter(cmd))

{

// fire Fill method to fetch the data and fill into DataTable

ad.Fill(table);

}

}

}

// specify the data source for the GridView

GridView1.DataSource = table;

// bind the data now

GridView1.DataBind();

}

 

In the OpenPopup function, we have shown the alert with the AutoId value. We can also open a popup window by passing AutoId value as querystring and perform operation based on that in the Popup page.

OUTPUT

Thanks for reading, hope you liked it.

Keep reading my forth coming articles. To read my series of articles on ASP.NET,click here.

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Nagarajsoft on: 10/31/2011 | Points: 25
Sir,
Thank you for this article.Your articles are really helpful to the Beginners like me.
I have one doubt. Here, you have used

<a href="javascript:void(0)" title="Click for more details"onclick="OpenPopup('<%# Eval("AutoId") %>')">Details</a>

Normally i use linkbutton... <asp:LinkButton ID="lnk_CNPOReqShipDt" PostBackUrl="dummypage.aspx?id="+<%# Eval("AutoId") %> >

What is the difference between these two?
Posted by: SheoNarayan on: 10/31/2011 | Points: 25
In this case LinkButton is basically posting the entire page on the server that is costly as anyways you are going to only use the querystring value that is passing in to the dummypage.aspx so why not just redirect to that page. Also instead of using asp:LinkButton control that is a server side control and consumes server resources to get processed and creates ViewState just use html anchor tag, its fast and no viewstate at all.

Wherever possible, use html elements instead of asp.net server controls.

Hope this explanations helps.

Thanks
Posted by: Nagarajsoft on: 11/1/2011 | Points: 25
@ SheoNarayan

Thank you very much for your explanation.It cleared my doubt .

Login to post response

Comment using Facebook(Author doesn't get notification)