Custom command firing Change() event

[Pr3vention]

I've been using Telerik products for a while now and have recently moved my team to using KendoUI. One big difference I noticed about grids is the change in event handlers. In this instance, I have a custom command button that should perform some kind of task like toggling an active/inactive state. It does fire the custom command's event handler as expected, but it also appears to fire the change() event.

Is this the intended behavior of the framework, or is there a way to execute a custom command without having the change() event fire as well?

Sample code:

<script type="text/javascript">

    function OnToggleClick(e) {

        e.preventDefault();

        alert("Command has been clicked");

    }

    function OnRowSelect(e) {

        e.preventDefault();

        alert(this.dataItem(this.select()).ID);

    }

</script>

@{Html.Kendo().Grid<MyModel>()

.Name("MyGridName")

.DataSource(db =>

db.Ajax()

.Model(o => o.Id(x => x.ID))

.PageSize(20)

.Create("InsertNewRecord", "Setup")

.Read("GetRecords", "Setup")

)

.Events(ev => ev.Change("OnRowSelect"))

.Columns(col =>

{

col.Bound(o => o.ID).Title("ID");

col.Bound(o => o.Field1).Title("Field1");

col.Bound(o => o.Field2).Title("Field2");

col.Bound(o => o.IsActive).Title("ToggleMe");

col.Command(com =>

{

com.Custom("ToggleActive").Text("Toggle").Click("OnToggleClick");

}).Width(80);

})

.ColumnMenu().Pageable().Filterable().Sortable().Selectable()

.Scrollable(scroll => scroll.Height(340))

.Render();

}

Thank you,
-J

[Marcin Butlak]

No this is normal DOM behaviour. When you click on a child element the click event is simply bubbling up the DOM tree calling every parent handler. In this case calling the change event because the click event is additionally selecting the grid row. To prevent this behaviour call e.stopPropagation() instead of e.preventDefault().

UPDATE:
On second thought clicking on a button shouldn't select the grid row. I have checked the command with the selectable option enabled and this is clearly a grid issue.

[Petur Subev]

Hello,

Basically you are using multiple selection you will still be able to create rectangle over this button - this is not just a simple click.

In order to avoid this I would suggest you to prevent the mousedown event from propagation.

To do so you could use the following approach after declaring your Grid where myCmd is the name of your command:

<script type="text/javascript">
    $(function () {
        $('.k-grid tbody').on('mousedown', '.k-grid-myCmd', function (e) {
            e.stopPropagation()
        })
    })
</script>

Kind Regards,
Petur Subev
the Telerik team

[Pr3vention]

Thank you both for your responses.

Event bubbling is something that I hadn't thought of prior to my posting, but now it makes sense that it could be the culprit. I played around with the proposed solution of e.stopPropagation(), but it still appears to fire off both events regardless of how or when the call is made.

I'm thinking that perhaps the Change() event fires first followed immediately by the custom command rather than the other way around. I'll need to dig further into the kendo scripts to find evidence for or against that behavior, but it would certainly explain why e.stopPropagation() does not yield the desired behavior.

[Petur Subev]

Hello again,

I prepared a sample to see it in action.

Kind regards,
Petur Subev
the Telerik team

[Pr3vention]

Thank you for the prepared sample solution.

The view file's Javascript does appear to match what I have been attempting, but I notice it is missing the .Events() declaration. I am required to have a row-selection event fire that will perform a particular task. This task, in my case, is an AJAX post to load in a partial view based on data gathered from the selected row. To my knowledge, that would require the .Change() event to be declared and the row selection behavior(s) would be defined there.

More specifically, I am not having any issues firing the custom event. The issue is the .Change() event firing when using a custom command (since it triggers the row's state to be changed), while the desired behavior is to avoid the .Change() event on command click.

[Petur Subev]

Hello Joshua,

Indeed with the work-around applied the change event wont be triggered. 

You could also add your selection logic inside of the handler used for prevention.

Regards,
Petur Subev
the Telerik team