Grid.MVC disable onrowselect for embedded buttons

1.3k Views Asked by At

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

2

There are 2 best solutions below

0
On
 function DeactivateContract(e) {
  event.stopImmediatePropagation()
  //DO STUFF
};

The event.stopImmediatePropagation call will stop the rowselect from firing afterwards.

0
On

Add class deactivate to your button

   .RenderValueAs(o => @<button class="deactivate" onclick="DeactivateContract()"><i class='oi iconPowerOn' data-glyph='power-standby' title='Deactivate Contract'></i></button>);

Then on event

$(function () {
pageGrids.contractsGrid.onRowSelect(function (e) {
    debugger;
    if(e.row.attr("class") != "deactivate") 
    return false;

    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;

    });
});