MVC 3 Webgrid makes an entire row clickable

Question

I use webgrid in my razor mode in MVC 3. The following shows what my webGrid looks like, I want the whole row to be clicked, as well as click-through values ​​to the javascript method.

I can achieve a javascript method call across the text of all columns. I want the same thing to happen to click anywhere on the entire line.

I ask you to participate in 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 must use jQuery to add a click function to a string.

Add htmlAttributes: new {id = "MainTable"} to your web property.

 <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 did this in my project with the addition of the style: "click_able" class for a specific column.

 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 a click function, for example.

 <script type="text/javascript"> $(".click_able").click(function () { // Do something }); 

It works great in my case.