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

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.