How To Make A WebGrid Row Clickable

4.23 (13 votes)

This snippet is one in a series showing how to use jQuery to enhance the behaviour of a Web Pages WebGrid. This example shows how to make an entire row clickable so that the user is taken to another page that displays details of the selected row.

This example makes use of the SQL CE 4.0 version of the Northwind database. It assumes that you have a layout page that references jQuery and includes a RenderSection call to an optional section named "script":

<!DOCTYPE html>

<html lang="en">
        <meta charset="utf-8" />
        <script src="@"//"type="text/javascript"></script>
        <link href="@Href("~/styles/site.css")" rel="stylesheet" />
        @RenderSection("script", required: false)

The main page gets data from the database, specifies some columns and an AJAX update container. It also includes the jQuery that makes rows clickable in the script section:

    Page.Title = "Clickable Rows";
    var db = Database.Open("Northwind");
    var query = "SELECT * FROM Customers";
    var data = db.Query(query);
    var columns = new[]{"CustomerID", "CompanyName", "ContactName", "Address", "City", "Country", "Phone"};
    var grid = new WebGrid(data, ajaxUpdateContainerId: "grid", columnNames: columns);
<h1>Clickable Rows</h1>
<div id="grid">
        tableStyle : "table",
        alternatingRowStyle : "alternate",
        headerStyle : "header"
@section script{
<script type="text/javascript">
        $('tbody tr').hover( function(){
        }).on('click', function(){
            location.href = '/Details/' + $(this).find('td:first').text();  

The CSS for the 'clickable' style is defined as follows:

    cursor: pointer;
    background: #ffff99;

As the user runs their cursor (hovers) over the rows of data, the current row turns yellow and the the cursor changes to a hand with a pointing finger shape. This event handler has only been applied to the table rows within the tbody element, so that the table head and foot are not affected. At the same time, the row has a click event handler added, which navigates the user to a page called Details. The text content of the first cell in each row ('td:first') is appended to the URL as UrlData. Accordingly, clicking on the first row will take the user to Details/ALFKI. The code to retrieve and display the related details in this example is simple:

    Page.Title = "Details";
    var db = Database.Open("Northwind");
    var query = "SELECT * FROM Customers WHERE CustomerID = @0";
    var data = db.QuerySingle(query, UrlData[0]);

@foreach(var item in data.GetDynamicMemberNames()){
    <strong>@item:</strong> @data[item]<br />

A demo containing the source code is available here.


Date Posted:
Last Updated:
Posted by:
Total Views to date: 72636


- Jacob Fernandez

Thank you for this working tutorial. But I have things in my mind. Is it reusable? What if I have 10 webgrids? What should I do with the jquery?

- Mike


You can use jQuery to target specific WebGrids by placing them in their own divs, with their own id for instance.

- CodeGolem

Hi! Nice article!
Thank you for sharing.

But what if I don't want to display the ID field on the grid?


- Ola

GREAT example!

The only problem for me is that after changing the grid page it stops working - the grid is not clickable any more.

- Mindaugas

Hi, your tutorials and examples are excellent. I tried to combine the jquery example from searchable webgrid with the jquery from this example but it didn't work. Both have there own <script> section but only the second one seems to be in effect. Can you point me in the right direction? Should I combine the jquery into one?

Thanks again.

@section script{

<script type="text/javascript">
$('th a, tfoot a').live('click', function() {
$('form').attr('action', $(this).attr('href')).submit();
return false;

- Britto

Works Perfectly... Thx

- Raymond

@CodeGolem: on the ID field, add the following > .Hidden(true)
This prevents the ID from showing, but yet, you can use it since
its still there ;) (ie. if you need to redirect to a detail page or alike..)

Recent Comments

Rajasekar 24/11/2015 12:27
In response to Import Data From Excel to Access with ASP.NET
While use this code i'm facing on error: "Unrecognized Database format C:\mydabase.accdb" can any...

Parmod 24/11/2015 07:28
In response to ASP.NET 5 Project Basics
For a new learner (Fresher) in ASP.NET there is a issue Fresher have to learn two types of , old...

Robert 22/11/2015 21:35
In response to ASP.NET 5 By Numbers
I have to agree fully with Paul, this does sound like an entire mis-mash of technologies. Sort of in...

Christian 21/11/2015 15:46
In response to MVC 5 with EF 6 in Visual Basic - Creating an Entity Framework Data Model
Many thanks Mike to introduce me in the EF6 Code First way of thinking. Exactly what I need for my...

ax plains 20/11/2015 16:29
In response to Examining the Details and Delete Methods
Hello, really great tutorial for a beginner like me! Is it possible to have an explanation on how a...

Abdul Latif 20/11/2015 14:42
In response to Reading Excel Files Without Saving To Disk In ASP.NET
Could anyone please help me, I am getting : "OfficeOpenXml.ExcelPackage" does not contain a for...

Thomas 20/11/2015 09:44
In response to Cheat Sheet - .NET Framework Exceptions
Hey Mike, nice list. I've also checked your article on how you created the list, but is there any to...

Pramod Gagare 19/11/2015 11:18
In response to Date Formatting in C#

Robby 19/11/2015 08:16
In response to WebMatrix - Database Helpers for IN Clauses
Would it also be possible to override the default query and querysingle methods to include the azure...

Menja 18/11/2015 08:28
In response to Sessions and Shopping Carts
Thank you for a perfect description and that you show all the screenshot at the same time!!! It a...