Issue with entire table being clickable instead of a single row within a WEBGRID in MVC3
I have changed my application to incorporate a frontend changes. I have now created tables and within these tables, i have @RenderBody()
When my webgrid shows upon my screen, the entire screen becomes clickable instead of just the individual rows within the WEBGRID.
Here is my VIEW for the WEBGRID:
- @{
var grid = new WebGrid(Model,
rowsPerPage: 5,
defaultSort: "projectStatus");
}
@using (Html.BeginForm())
{
if (ViewBag.userTypeID == null)
{
<br />
<p> @Html.ActionLink("Log On", "LogOn", "Account") to GrepTech or @Html.ActionLink("Register", "Register", "Account") if you don't have an account.
</p>
}
<fieldset>
<legend>List Of All Projects</legend>
<br />
<div id="grid">
@grid.GetHtml(columns: grid.Columns(
grid.Column("projectCode", "Project Code", canSort: true),
grid.Column("projectName", "Project Name", canSort: true),
grid.Column("projectCreationDate", header: "Created Date", format: @<text>@item.projectCreationDate.ToString("dd-MMM-yyyy")</text>, canSort: true),
grid.Column("projectEndDate", header: "Bidding Expiry Date", format: @<text>@item.projectEndDate.ToString("dd-MMM-yyyy")</text>, canSort: true),
grid.Column("projectStatus", "Project Status", canSort: true),
grid.Column("daysLeft", "Days Remaining", canSort: true)),
tableStyle: "webgrid",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style")
</div>
<script type="text/javascript">
$(function () {
$('tbody tr').on('hover', function () {
$(this).toggleClass('clickable');
}).on('click', function () {
var self = this;
$.ajax(
{
type: "POST",
url: "/Projects/AllProjectsHeaderSR",
data: "projectCode=" + $(this).find('td:first').text(),
success: function (data) {
$('#container').html(data);
$(self).unbind('click');
}
});
});
});
</script>
</fieldset>
As you can see the clickable part is set in the Jquery for the VIEW(). But the entire screen becomes clickable. Im guessing because the RenderBody() is within tables ? Im not sure.
How do i go about just getting the row clickable within the webgrid only ?