MVC 3 Webgrid make entire row clickable

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><a href="javascript:SubmitValues('@item.Col1','@item.Col2','@item.Col3');">@item.CompanyName</a></text>, header: "ABC"),

            grid.Column("CompanyAddress", format: @<text><a href="javascript:SubmitValues('@item.Col1','@item.Col2','@item.Col3');">@item.CompanyName</a></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><a href="javascript:SubmitValues('@item.Col1','@item.Col2','@item.Col3');">@item.CompanyName</a></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.