I have a Grid.MVC table which is working fine with a row select function for editing each row. To speed things up I'm trying to add a power button to the first column which will effectively toggle the row active or inactive at a database level.
However when clicking the button it fires both the button's code and the onRowSelect code. Is it possible to turn off onRowSelect for certain columns or if not get the object being clicked so I can not fire the selection code if I know a button has been pressed?
The grid code is as follows.
@Html.Grid(Model.AllContracts).Named("contractsGrid").Columns(columns =>
{
columns.Add(item => item.ContractTypeID)
.Titled("ID")
.Css("grid-id hidden")
.SetWidth("50px")
.Sortable(true);
columns.Add(item => item.active)
.Titled("")
.Encoded(false)
.Sanitized(false)
.SetWidth(30)
.RenderValueAs(o => @<button onclick="DeactivateContract()"><i class='oi iconPowerOn' data-glyph='power-standby' title='Deactivate Contract'></i></button>);
columns.Add(item => item.ContractDescription)
.Titled("Contract Name")
.Sortable(true).Filterable(true);
}).WithPaging(7)
And the script
<script>
$(function () {
pageGrids.contractsGrid.onRowSelect(function (e) {
debugger;
var clientID = e.row.ContractTypeID;
var url = '@Url.Action("UpdateContract", "Contracts", new { id = -1 }) ';
url = url.replace("-1", e.row.ContractTypeID);
window.location.href = url;
});
});
function DeactivateContract() {
alert("DEACTIVE")
};
Thanks
The event.stopImmediatePropagation call will stop the rowselect from firing afterwards.