JG Vimalan's Blog

It is all about coding!

Clickable GridView with Postback in ASP.NET 4.0

In this post, I will show you how to make a GridView row clickable and read the selected row values after postback.

Step 1:

Create an ASP.NET 4.0 web application. Add a gridview control in the application.

Step 2:

Create RowCreated and RowDataBound events and set their values as shown below,

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add(“onclick”, “CreatePostBack(this);”);
}
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add(“onmouseover”, “mouseIn(this);”);
e.Row.Attributes.Add(“onmouseout”, “mouseOut();”);
}
}

Here, the CreatePostBack(this); is a javascript function. In this function call the _doPostBack function and pass the necessary parameters as shown below,

<script type=”text/javascript”>
function mouseIn(row) {
document.body.style.cursor = ‘pointer’;
}
function mouseOut() {
document.body.style.cursor = ‘auto’;
}

function __doPostBack(eventTarget, eventArgument) {
var theForm = document.forms[‘ctl01’];
if (!theForm) {
theForm = document.ctl01;
}
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}

function CreatePostBack(row) {

__doPostBack(‘GridView1’, row.rowIndex);

//in this example, i am just passing the rowIndex. You can read the selected row values and pass them.
}
</script>

Step 3:

Add two hidden fields as shown below for capturing the  event target and event argument,

<input type=”hidden” name=”__EVENTTARGET” id=”__EVENTTARGET” value=”” />
<input type=”hidden” name=”__EVENTARGUMENT” id=”__EVENTARGUMENT” value=”” />

Step 4:

In the Page Load event, set the data source for the gridview control and the code for reading the values when there is a post back,

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.DataSource = GetUsers(); //use your method for getting datasource value here
GridView1.DataBind();
}
else if (Request.Form[“__EVENTTARGET”] == “GridView1”)
{
var arg = Request.Form[“__EVENTARGUMENT”];
//now you got the selected row values
}
}

Step 5:

Thats all! The Gridview markup is given below for your reference,

<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>
<input type=”hidden” name=”__EVENTTARGET” id=”__EVENTTARGET” value=”” />
<input type=”hidden” name=”__EVENTARGUMENT” id=”__EVENTARGUMENT” value=”” />
<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”false”
onrowcreated=”GridView1_RowCreated” onrowdatabound=”GridView1_RowDataBound”>
<Columns>

….

</Columns>
</asp:GridView>
</asp:Content>

So, whenever a gridview row is clicked, the postback will happen and you can read the selected row values.

The working sample can be downloaded from here,

https://docs.google.com/file/d/0By3at1G2EGgOYTNYQ1ZuQi11aXc/edit

File->Download

September 15, 2012 Posted by | ASP.NET, C#.NET, VS 2010 | , | 9 Comments

Clickable and Double Clickable ASP.NET 4.0 GridView

In this post, I will show you how to make a GridView clickable and double clickable. Also, I will show how to read the selected row values using java script.

I assume that you have a gridview in your asp.net page and the datasource is properly set.

Step 1:

In the GridView RowCreated event, set the onclick and ondblclick events as shown below. selectRow(this); and showDetail(this); are javascript functions and I have expained about them later in this post.

protected void GridView1RowCreated(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add(“onclick”, “selectRow(this);”);
                e.Row.Attributes.Add(“ondblclick”,”showDetail(this);”);
            }
        }

Step 2:

In the GridView RowDataBound event, set the onmouseover and onmouseout attributes as shown below. mouseIn(this); and mouseOut(); are javascript functions and I have expained about them later in this post.

protected void GridView1RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
             e.Row.Attributes.Add(“onmouseover”, “mouseIn(this);”);
         e.Row.Attributes.Add(“onmouseout”, “mouseOut();”);
     }
        } 

Thats all! Now your work at code behind is over. Lets look at the javascript functions used for reading the selected gridview row and launching a popup when the row is double clicked.

Step 3:

The javascript functions are given below.

<script type=”text/javascript”>

function mouseIn(row) {
    document.body.style.cursor = ‘pointer’;
}
function mouseOut() {
    document.body.style.cursor = ‘auto’;   
}

//This function will provide you an idea on reading gridview values in
//javascript
function selectRow(row) {
var index = row.rowIndex – 1; //subract 1 to get the selected row index
var numberOfRows = row.length;
var gridViewObj = document.getElementById(“<%=GridView1.ClientID %>”);
var name = ”;
var gender = ”;

row.style.backgroundColor = “yellow”; //this makes the selected row as yellow color

//specific to browsers other than firefox
            if (document.all) {
                name = gridViewObj.rows[index].cells[1].innerText;
                gender = gridViewObj.rows[index].cells[2].innerText;               
            }
            //specific to firefox
            else {
                name = gridViewObj.rows[index].cells[1].textContent;
                gender = gridViewObj.rows[index].cells[2].textContent;              
            }
}

function showDetail(row) {

//read the values from gridview as shown.
//open a page as popup and pass the values in query string
}
</script>

August 28, 2012 Posted by | ASP.NET, C#.NET, VS 2010 | | 1 Comment