如何点击KendoWindow内GridView按钮关闭弹窗并向关闭事件传数据

我来帮你搞定这个需求，核心思路是利用iframe的父窗口引用来访问主视图的KendoWindow实例，同时把选中的Grid数据传递过去，具体修改步骤如下：

1. 主视图：存储KendoWindow实例到ViewModel #

首先修改主视图的initVm函数，把创建好的KendoWindow实例存到ViewModel的属性中，方便后续从Partial View访问：

function initVm(arg) {
    var vm = kendo.observable({
        windowInstance: null, // 新增属性存储弹窗实例
        onOpenKendoWindow: function () {
            $("#Window-box").kendoWindow({
                iframe: true,
                content: arg.GetPartialContent_Url,
                title: 'Some Title',
                width: 500,
                height: 'auto',
                close: function (e) {
                    // 在此接收Partial View传递过来的数据
                    if (e.sender.selectedData) {
                        // 这里可以处理你的业务逻辑，比如绑定到主视图控件
                        console.log("从弹窗收到的数据：", e.sender.selectedData);
                        // 示例：把数据赋值给ViewModel的某个属性
                        // vm.set("selectedTransaction", e.sender.selectedData);
                    }
                }
            });
            var dialog = $("#Window-box").data("kendoWindow");
            vm.set("windowInstance", dialog); // 将弹窗实例存入ViewModel
            dialog.maximize();
        }
    });
    return vm;
}

2. Partial View：Grid选中后关闭弹窗并传递数据 #

修改Partial View的initPartialVm函数，在onSelectTransaction方法中获取Grid选中的数据，然后通过parent对象访问主视图的ViewModel，拿到弹窗实例并传递数据：

function initPartialVm(arg) {
    var vm = kendo.observable({
        onSelectTransaction: function () {
            // 获取Grid实例和选中的行数据
            var grid = $("#gridTransactions").data("kendoGrid");
            var selectedRow = grid.select();
            if (!selectedRow.length) return; // 如果没有选中行，直接返回
            
            var selectedData = grid.dataItem(selectedRow);
            
            // 访问主视图的ViewModel和弹窗实例
            var mainVm = parent.viewModel;
            var mainWindow = mainVm.windowInstance;
            
            // 将选中数据附加到弹窗实例上，供关闭事件读取
            mainWindow.selectedData = selectedData;
            
            // 关闭弹窗
            mainWindow.close();
        }
    });
    return vm;
}

3. 确保Grid支持行选择 #

在Partial View的initPartialView函数中，初始化Grid时要开启行选择功能，并绑定选择按钮的点击事件：

function initPartialView(vm) {
    $("#gridTransactions").kendoGrid({
        selectable: "row", // 允许选中单行
        columns: [
            // 你的列配置，示例：
            { field: "Id", title: "交易ID" },
            { field: "Amount", title: "金额" },
            { field: "CreateTime", title: "创建时间" },
            // 选择按钮，点击触发onSelectTransaction
            { command: { text: "选择", click: vm.onSelectTransaction }, title: "操作", width: 120 }
        ],
        dataSource: {
            transport: {
                read: {
                    url: vm.GetTransactions_Url,
                    type: "GET"
                }
            },
            schema: {
                model: {
                    id: "Id" // 指定主键字段
                }
            }
        }
    });
}

原理说明 #

因为弹窗使用了iframe: true，Partial View的脚本运行在独立的iframe环境中，通过parent对象可以直接访问主页面的全局变量（这里主页面的viewModel是全局变量），从而拿到KendoWindow实例。我们把选中的数据附加到弹窗实例上，主视图的close事件就能通过e.sender（即弹窗实例）读取到这些数据。

内容的提问来源于stack exchange，提问作者Mohsen Jafari