JG Vimalan's Blog

It is all about coding!

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>

Advertisements

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

1 Comment »

  1. Thanks

    Comment by saju ahmed | December 29, 2012 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: