ASP.NET Core - Kendo 对话框：如何阻止模态窗口转到页面顶部

Question

每当弹出模式窗口时，它都会像这样转到页面顶部： https://i.imgur.com/6DDP3Ic.gif

独立的telerik项目https://filebin.net/wgcuasrr6uhejmrv

如何防止它进入页面顶部？

这里是代码，删除确认对话框转到页面顶部：

<div class="row">
    <div class="col-12">
        @(Html.Kendo().Grid<TelerikAspNetCoreApp7.Models.OrderViewModel>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.OrderID).Filterable(false);
                    columns.Bound(p => p.Freight);
                    columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                    columns.Bound(p => p.ShipName);
                    columns.Bound(p => p.ShipCity);
                    columns.Command(command =>
                    {
                        command.Custom("Destroy")
                            .Click("showDeleteConfirmation")
                            .HtmlAttributes(new { style = "width:40%" });
                    }).Width("15%");
                })
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .HtmlAttributes(new { style = "height:550px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Read(read => read.Action("Orders_Read", "Grid"))
                    .Destroy(read => read.Action("Orders_Read", "Grid"))
                )
        )
    </div>
</div>

@(Html.Kendo()
        .Dialog()
        .Name("DeleteConfirmation")
        .Modal(true)
        .Title("Confirm Delete")
        .Content("Are you sure you want to delete this item?")
        .Visible(false)
        .Actions(a =>
        {
            a.Add().Text("No").Action("cancelDelete");
            a.Add().Text("Yes").Action("confirmDelete").Primary(true);
        })
)
<script>
    var modelToDelete;

    function showDeleteConfirmation(e) {
        var grid = $("#grid").data("kendoGrid");
        var dialog = $('#DeleteConfirmation').data("kendoDialog");

        modelToDelete = grid.dataItem($(e.target).parents('tr'));
        dialog.content("Are you sure you want to delete this item with ID - " + modelToDelete.OrderID + "?");
        dialog.open();
    }

    function confirmDelete(e) {
        var grid = $("#grid").data("kendoGrid");
        grid.dataSource.remove(modelToDelete); 
        grid.dataSource.sync();
        $('#DeleteConfirmation').data("kendoDialog").close();
    }

    function cancelDelete() {
        $('#DeleteConfirmation').data("kendoDialog").close();
    }
</script>

Answer 1

很久以前我遇到过类似的问题。不幸的是，我完全忘记了我是如何解决的:(

建议：

尝试将e.preventDefault(); 添加到您的自定义命令处理程序：'

• https://www.telerik.com/forums/problem-expandrow()-causes-jump-to-top-of-window

• https://stackoverflow.com/a/1253492/3135317