MVC 3 Webgrid make entire row clickable - asp.net-mvc-3

Question

I am using webgrid in my razor view in MVC 3.
Below is how my webGrid looks, I want to make the entire row clickable and on click pass values to the javascript method also.
I am able to achieve calling my javascript method on text of all columns. I want the same to happen for click of anywhere on the entire row.
Please guide me on this. Thanks
#grid.GetHtml(
columns: grid.Columns(
grid.Column("CompanyName", format: #<text>#item.CompanyName</text>, header: "ABC"),
grid.Column("CompanyAddress", format: #<text>#item.CompanyName</text>, header: "DEF"),
))
}

Answer 1

You have to use JQuery to add row click functionality
Add htmlAttributes: new { id="MainTable" } in your webgrid.
<script type="text/javascript">
$(function () {
var tr = $('#MainTable').find('tr');
tr.bind('click', function (event) {
var values = '';
var tds = $(this).find('td');
$.each(tds, function (index, item) {
values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
});
alert(values);
});
});
</script>

Answer 2

I have done this in my project with adding a class style: "click_able" on specific column like.
grid.Column("CompanyName", style: "click_able", format: #<text>#item.CompanyName</text>, header: "ABC"),
and then add click function like.
<script type="text/javascript">
$(".click_able").click(function () {
// Do something
});
It working fine in my case.