单击 Kendo Grid 按钮将数据传递到 Kendo Window答案

【问题标题】：Passing data to Kendo Window on a button click of Kendo Grid单击 Kendo Grid 按钮将数据传递到 Kendo Window
【发布时间】：2019-12-10 01:14:10
【问题描述】：

在按钮单击事件（网格中的自定义命令）上，我想要数据到剑道窗口（loadcontentfrom）动作，想知道是否有人可以指导？

<div class="container-fluid">
<div class="row">
    <div class="col-md-4">
        @Html.Label("Summary")
        @(Html.Kendo().Grid<Settings.Services.Models.DocumentTypeStatusList>()
     .Name("EmpGrid")
     .Columns(columns =>
     {
         columns.Bound(c => c.DocumentType.DocumentTypeDescription).Width(200);
         columns.Bound(c => c.Status).Width(100);
         columns.Command(c => c.Custom("ADD").IconClass("k-icon k-i-plus").Click("showDetails")).Width(100);

     })
     .HtmlAttributes(new { style = "height: 700px;" })
        .Scrollable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
     .DataSource(dataSource => dataSource
         .Ajax()
         .Model(model =>
                 {
                     model.Id(p => p.DocumentType.DocumentTypeId);
         })
         .Read(read => read.Action("GetAllDocumentsTypeStatus", "Home"))
         .PageSize(20)
         )


        )

        @(Html.Kendo().Window().Name("Details")
.Title("Add/Edit Document Type Setting")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(600)
.LoadContentFrom("ModifyDocumentTypeSettings", "Home")
.Actions(actions => actions.Close())
        )
    </div>


</div>

这是从网格中获取值的 javascript 函数，但我如何将其传递给剑道窗口函数：

 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();
   }

通过重构以下代码解决了这个问题（有关更多信息，请参阅此问题：how to set LoadContentFrom kendo window in run time）：

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
   
    $(document.body).append('<div id="Window"></div>');
    $('#Window').kendoWindow({
        title: "Add/Edit Document Type Setting",
        modal: true,
        resizable: false,
        width: 400,
        content: "/Home/ModifyDocumentTypeSettings/" + dataItem.id,
        visible: false,
        minHeight: 350,
        animation: {
            open: {
                effects: "expandVertical",
                duration: 1000
            },
        },
        close: function () {
            setTimeout(function () {
                $('#Window').kendoWindow('destroy');
            }, 200);
        }
    }).html('<img src="761.gif" />').data('kendoWindow').center().open();

【问题讨论】：

标签： javascript kendo-ui kendo-grid kendo-asp.net-mvc kendo-window

【解决方案1】：

通过重构以下代码解决了这个问题（有关更多信息，请参阅此问题：how to set LoadContentFrom kendo window in run time）：

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

$(document.body).append('<div id="Window"></div>');
$('#Window').kendoWindow({
    title: "Add/Edit Document Type Setting",
    modal: true,
    resizable: false,
    width: 400,
    content: "/Home/ModifyDocumentTypeSettings/" + dataItem.id,
    visible: false,
    minHeight: 350,
    animation: {
        open: {
            effects: "expandVertical",
            duration: 1000
        },
    },
    close: function () {
        setTimeout(function () {
            $('#Window').kendoWindow('destroy');
        }, 200);
    }
}).html('<img src="761.gif" />').data('kendoWindow').center().open();

【讨论】：