Delete issue in grid with subgrids

3 posts, 0 answers
  1. Admin
    Admin avatar
    2 posts
    Member since:
    Jan 2016

    Posted 02 Mar Link to this post

    Hi,

    I have a grid with subgrids on page. And I had to make custom delete button which shows delete dialog window (default kendo behaviour - show alert, not acceptable in my app).  
    But when someone press delete-button in subgrid, it invokes click on delete button in main grid (via injected.js, I understood that in debug proccess in chrome). I dont need that behaviour. How to prevent click on delete button in main grid?

    Provide part of code here, and all code of this page in Attachment

    Code : 

    //Main grid
    @(Html.Kendo().Grid<TerminalViewModel>()
        .Name("TerminalsGrid")
        .Columns(c =>
        {
            c.Bound(x => x.Brand.Name)
            c.Bound(x => x.TerminalModel.Name)
            c.Bound(x => x.SerialNumber)
            c.Bound(x => x.CommissioningDate)
            c.Bound(x => x.CurrentAZS)
            c.Command(command => command.Edit()
                .HtmlAttributes(new { style = "text-align: center;" })
                .Width(131);
            c.Command(command => command.Custom("Delete")
                .Text("<span class='k-icon k-delete'></span>Удалить")
                .Click("prepareToDelete"))
                .HtmlAttributes(new { style = "text-align: center;" });
        })
        .Events(x => x
            .Save("onSaveDisableUpdateButton")
            .DataBound("onDataBoundHideControlButtons"))
        .DataSource(ds => ds
            .Ajax()
            .Events(e => e
                .Error("onErrorInCatalogs"))
            .Model(m =>
            {
                m.Id(x => x.Id);
                m.Field(x => x.Brand).DefaultValue(new ListItemIntViewModel { Name = "" });
                m.Field(x => x.TerminalModel).DefaultValue(new ListItemIntViewModel { Name = "" });
                m.Field(x => x.Organization).DefaultValue(new ListItemViewModel { Name = "" });
                m.Field(x => x.Contractor).DefaultValue(new ListItemViewModel { Name = "" });
            })
            .Read(r => r.Action("JsonRead", "Terminals"))
            .Create(c => c.Action("JsonCreate", "Terminals"))
            .Update(u => u.Action("JsonUpdate", "Terminals"))
        )
     
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditTerminal")
    .Window(x => x.Width(550).Title("Данные терминала")))
        .ToolBar(t => t.Create())
        .Sortable(s => s.AllowUnsort(true))
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .ClientDetailTemplateId("template")
        .Scrollable(scroll => scroll.Height("auto"))
        .Pageable()
        .Events(events => events
            .DetailExpand("detailExpand")
            .DetailCollapse("detailCollapse"))
    )
    // Helper for Delete Window
    @Html.DeleteModal()

     

    //Subgrid
    @helper  StateChanges()
    {
        @(Html.Kendo().Grid<TerminalStatesChangeHistoryViewModel>()
                .Name("grid_state_changes_#=Id#")
                .Columns(columns =>
                {
                    columns.Bound(col => col.TerminalState.Name)
                        .EditorTemplateName("EditTerminalState");
                    columns.Bound(col => col.StartTime)
                        .EditorTemplateName("DateTimeEditor");
                    columns.Bound(col => col.EndTime)
                        .EditorTemplateName("DateTimeNullableEditor");
                    columns.Command(c => c.Edit())
                        .HtmlAttributes(new { style = "text-align: center;" });
                    columns.Command(command => command.Custom("Delete")
                        .Text("<span class='k-icon k-delete'></span>Удалить")
                        .Click("prepareToDeleteInSubgrid"))
                        .HtmlAttributes(new { style = "text-align: center;" });
                })
                .Sortable()
                .Events(x => x
                    .Save("onSaveDisableUpdateButton")
                    .DataBound("onDataBoundHideControlButtons"))
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .ToolBar(toolbar => { toolbar.Create(); })
                .DataSource(data => data
                    .Ajax()
                    .Sort(sort => sort.Add("StartTime").Descending())
                    .Events(events =>
                    {
                        events.Error("onErrorInSubgrid.bind({ WidgetID: 'grid_state_changes_#=Id#'})");
                        events.Sync("onSubgridSync.bind({ WidgetID: 'grid_state_changes_#=Id#'})");
                    })
                    .Model(model =>
                    {
                        model.Id(m => m.Id);
                        model.Field(x => x.TerminalState).DefaultValue(new ListItemIntViewModel());
                        model.Field(x => x.StartTime).DefaultValue(DateTime.Now);
                    })
                    .Create(update => update.Action("StateChangesCreate", "Terminals", new { terminalId = "#= Id #" }))
                    .Read(read => read.Action("StateChangesRead", "Terminals", new { terminalId = "#= Id #" }))
                    .Update(update => update.Action("StateChangesUpdate", "Terminals"))
                )
                .Pageable(pager => pager.Refresh(true))
                .ToClientTemplate()
        )
    }

    <script>
    function prepareToDeleteInSubgrid(e) {
            e.preventDefault();
            var gridId = this.element[0].id;
            if (gridId.indexOf("state_changes") > 0) {
                deleteUrl = deleteStateChangeUrl;
            }
            else if (gridId.indexOf("fuel_station_changes") > 0) {
                deleteUrl = deleteFuelStationChangeUrl;
            }
            else return;
            showDelete(e, this);
        }
        function prepareToDelete(e) {
            var gridId = this.element[0].id;
            deleteUrl = deleteTerminalUrl;
            showDelete(e, this);
        }

    function showDelete(e, gridWidget) {
        if (gridWidget == undefined) {
            gridWidget = this;
        }
        var target = $('#deleteModal');
        var id = gridWidget.dataItem($(e.currentTarget).closest("tr")).id;
        gridname = '#' + gridWidget.element[0].id;
        target.find('#entryId').val(id);
        $('#PopupDeleteExceptionSection').css("display", "none");
        target.modal();
    }

    </script>

  2. Admin
    Admin avatar
    2 posts
    Member since:
    Jan 2016

    Posted 02 Mar in reply to Admin Link to this post

    Sorry, but attachment dont work (i cant upload .zip file)
    I upload source code via dropbox https://www.dropbox.com/s/lbogjlv03g17yo1/forKendoForum.zip?dl=0
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 04 Mar Link to this post

    Hello Mikhail,

    This question is not about the supported grid functionality, as it implements custom code around it. We could not run the application, as it does not build, so we do not have any means of reproducing the issue.

    The customizing confirmation window help topic shows how to achieve this with a Kendo UI window, thus styling the confirmation dialog.

    Regards,
    Alex Gyoshev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top