This is a migrated thread and some comments may be shown as answers.

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

1 Answer 134 Views
Grid
This is a migrated thread and some comments may be shown as answers.
George
Top achievements
Rank 1
George asked on 21 Feb 2014, 04:55 PM
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>

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 25 Feb 2014, 09:32 AM
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):

Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
George
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or