Popup Editing Not Working, Edit and Delete Button Trigger OnChange Event

[George]

Here's my View.  I have enabled Popup editing, which works fine if I don't subscribe to the Change event.  

However, I need to show a Details window when someone clicks on a row.  

What seems to be happening is that my custom Edit and Delete buttons are triggering the Change event.  Is there any way to prevent that?  


@model IEnumerable<ITServiceApps.Application>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

    <div @*class="right"*@ style="width: 1200px; overflow-x: scroll;">

        @(Html.Kendo().Grid<ITServiceApps.Application>()
        .Name("grid")
//        .Columns(columns => columns.AutoGenerate(action => { action.Width = "100px"; }))
.Columns(columns =>
{
                    columns.Command(command => command.Edit()).Width(45).Visible(true);
                    columns.Command(command => command.Destroy()).Width(45).Visible(true);   
                              
                    columns.Bound(c => c.Name).Width(100);
                    columns.Bound(c => c.RecordOwner).Width(100);
                    columns.Bound(c => c.Name).Width(100);
                    columns.Bound(c => c.Type).Width(100);
                    columns.Bound(c => c.RecordOwner).Width(100);
                    columns.Bound(c => c.RecordOwnerSubstitute).Width(100);
                    columns.Bound(c => c.ValidationDate).Width(100);
                    columns.Bound(c => c.Description).Width(100);
                    columns.Bound(c => c.Details).Width(100);
                    columns.Bound(c => c.Access).Width(100);
                    columns.Bound(c => c.HotlinePhone).Width(100);
                    columns.Bound(c => c.HotlineEmail).Width(100);
                    columns.Bound(c => c.HotlineServiceHours).Width(100);
                    columns.Bound(c => c.StatusValidDateStart).Width(100);
                    columns.Bound(c => c.StatusValidDateEnd).Width(100);
                    columns.Bound(c => c.Status).Width(100);
                    columns.Bound(c => c.GovernanceClass).Width(100);
                    columns.Bound(c => c.ResponsibleDepartment).Width(100);
                    columns.Bound(c => c.DegreeOfStandardization).Width(100);
                    columns.Bound(c => c.DataPrivacyCompliance).Width(100);
                    columns.Bound(c => c.DataPrivacyDocumentsUrl).Width(100);
                    columns.Bound(c => c.CITSectorCompliance).Width(100);
                    columns.Bound(c => c.RationaleIfNotCITSectorCompliance).Width(100);
                    columns.Bound(c => c.SLARelevance).Width(100);
                    columns.Bound(c => c.SWOTAnalysisURL).Width(100);
                    columns.Bound(c => c.ApplicationLanguages).Width(100);
                    columns.Bound(c => c.DataCenter).Width(100);
                    columns.Bound(c => c.ServiceDeskLocation).Width(100);
                    columns.Bound(c => c.ApplicationManagementCenter).Width(100);
                    columns.Bound(c => c.RemarkApplicationManagementCenter).Width(100);
                    columns.Bound(c => c.Architecture).Width(100);
                    columns.Bound(c => c.VisibleExternally).Width(100);
                    columns.Bound(c => c.ConnectionProtocol).Width(100);
                    columns.Bound(c => c.ECCRelevance).Width(100);
                    columns.Bound(c => c.ECCNLAN).Width(100);
                    columns.Bound(c => c.NumberOfNamedUsers).Width(100);
                    columns.Bound(c => c.ApplicationManagementCenter1).Width(100);
                    columns.Bound(c => c.OperationsModel).Width(100);
                    columns.Bound(c => c.AWV).Width(100);
                    columns.Bound(c => c.UsableInSolution).Width(100);
                    columns.Bound(c => c.StandAloneApplication).Width(100);
                    columns.Bound(c => c.Middleware).Width(100);
                    columns.Bound(c => c.System).Width(100);
                    columns.Bound(c => c.Remarks).Width(100);
                    columns.Bound(c => c.AdditionalDocuments).Width(100);
                    columns.Bound(c => c.Categorization).Width(100);
                    columns.Bound(c => c.Number).Width(100);
                    columns.Bound(c => c.ReportingCountry).Width(100);
                    columns.Bound(c => c.DistinctApplication).Width(100);
                    columns.Bound(c => c.Level).Width(100);
                    columns.Bound(c => c.FunctionalDomain).Width(100);
                    columns.Bound(c => c.ResponsibleWTFunnel).Width(100);
                    columns.Bound(c => c.GlobalApp).Width(100);
                    columns.Bound(c => c.ListOfCountries).Width(100);    
                })
        
                
        .HtmlAttributes(new { style = "height: 380px;" })
        .Scrollable(scrolling => scrolling.Enabled(true))
        // .Groupable()
        .Sortable()
        .Selectable(selection => selection.Enabled(true))        
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(c => c.Id))                
            .Read(read => read.Action("Apps_Read", "ITDB"))
            .Update(update => update.Action("Update", "ITDB"))
            .Create(update => update.Action("Create", "ITDB"))
            .Destroy(update => update.Action("Delete", "ITDB"))   
         
            )
        .Resizable(resize => resize.Columns(true))
        .Filterable(filtering => filtering.Enabled(true))
        .Editable(e => e.Mode(GridEditMode.PopUp))
        .ColumnMenu(columnMenu => columnMenu.Enabled(true))   
        .Events(e => e.Change("onChange"))         
        
      )


@(Html.Kendo().Window().Name("Details")
    .Title("Application Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(800)
)

    </div>

<style scoped="scoped">
    .demo-section {
        width: 1100px;
    }

        .demo-section h3 {
            margin: 5px 0 15px 0;
            text-align: center;
        }

    .left {
        width: 220px;
        float: left;
        height: 100%;
    }

    .right {
        margin-left: 220px;
    }

</style>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <!-- this will be the content of the popup -->
        ApplicationName: <input type='text' value='#= Name #' />

    </div>
</script>

<script type="text/javascript">

    var detailsTemplate = kendo.template($("#template").html());
    var windowObject;
    var Id;
    var grid;

    $(document).ready(function () {
        windowObject = $("#Details").data("kendoWindow");
    });

    function onChange(e) {
        e.preventDefault();

        grid = e.sender;
        var currentDataItem = grid.dataItem(this.select());
        Id = currentDataItem.Id;

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

        windowObject.refresh({
            url: "/ITDB/Details/" + Id
        });
        windowObject.open();
        windowObject.center();
    }

    var detailsTemplate = kendo.template($("#template").html());

    function showDetails(e) {
        e.preventDefault();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }
    </script>

[Vladimir Iliev]

Hi George,

By default the click on the custom button propagates to the Grid row if it's not prevented and triggers the select of the Grid. You can prevent the propagation for example using the DataBound event of the Grid to bind custom "click" event handlers to all custom buttons which to prevent the propagation. You can check the following example of preventing the propagation of the "click" event (it's using Grid for Web, however you can use the same DataBound event handler in your case):

• Grid: Prevent changing selection on clicking of custom command

Regards,
Vladimir Iliev
Telerik