如何获取模态窗口（Kendo-UI）的dataItem

Question

我正在尝试获取当前模式窗口的一个实例（以将模式窗口的数据保存到文件中）。 但是没有成功。 我试图通过onActivate然后console.log（$（this））;来做到这一点。

正确的方法是什么？ 还是我应该通过模板填充数据，然后使用kendoWindow的content属性？ 谢谢！

网格：

   $("#grid")
   .kendoGrid({
       dataSource: {
           transport: {
               read: {
                   url: "/api/GridData/GetCustomers",
                   dataType: "json"
               }
           }
       },    
       columns: [
                {
           command: { text: "View Details", click: viewDt  },
                    title: "View DT",
                    width: "100px"
                }
           ]
   });

HTML：

<form id="formViewDetail">
    Имя клиента:<br>
    <input type="text" name="ClientName" id="ClientNameViewDetail" value="">
    <br>

    ОКПО:<br>
    <input type="text" name="ClientOKPO" id="ClientOKPOViewDetail">
    <br>
    Дата регистрации:<br>
    <input type="text" name="RegistrationDate" id="RegistrationDateViewDetail">
    <br>
    Дата закрытия:<br>
    <input type="text" name="RemovalFromClientsDate" id="RemovalFromClientsDateViewDetail">
    <br>
    Комментарий:<br>
    <input type="text" name="Comment" id="CommentViewDetail">
    <br>
<button id="SubmitViewDetail">Сохранить</button> <button id="CloseViewDetail">Закрыть</button>
</form>

模态窗口：

var myWindow = $("#window");

    myWindow.kendoWindow({
        width: "600px",
        title: "Редактирование данных клиента:",
        visible: false,
        actions: [
            "Pin",
            "Minimize",
            "Maximize",
            "Close"
        ],
        activate: onActivateWnd
        //close: onClose
    });

    function onActivateWnd(e) {
        console.log($(this)); 
    }

填写数据：

       function viewDt(e) {
        var dItem = this.dataItem($(e.currentTarget).closest("tr"));
        console.log(dItem);
        myWindow.data("kendoWindow").center().open();
        //disabling input
        $("#formViewDetail").find("#ClientNameViewDetail").prop('disabled', true);
            $("#formViewDetail").find("#ClientOKPOViewDetail").prop('disabled', true);
            $("#formViewDetail").find("#RegistrationDateViewDetail").prop('disabled', true);
            $("#formViewDetail").find("#RemovalFromClientsDateViewDetail").prop('disabled', true);
            //passing data to form input
            $("#formViewDetail").find("#ClientNameViewDetail").val(dItem.ClientName);
            $("#formViewDetail").find("#ClientOKPOViewDetail").val(dItem.ClientOKPO);
            $("#formViewDetail").find("#RegistrationDateViewDetail").val(dItem.RegistrationDate);
            $("#formViewDetail").find("#RemovalFromClientsDateViewDetail").val(dItem.RemovalFromClientsDate);
    }       

Answer 1

提供的信息表明Window包含Grid中的一个数据项，当用户单击Grid行中的按钮时显示。 在这种情况下，从Grid的数据项而不是Window的内容中检索所需的信息会容易得多。 网格数据项在dItem变量中可用。

如果要在用户编辑客户信息后保存它，请考虑使用Grid的内置弹出窗口编辑和save事件。 这样，网格数据项将始终保存最新值。

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-save

http://demos.telerik.com/kendo-ui/grid/editing-popup

也可以将弹出窗口编辑与自定义弹出窗口编辑表单模板一起使用：

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-editable.template

最后，为了获得包含与Kendo UI相关的东西的数据项，请使用toJSON()获得一个普通对象：

http://docs.telerik.com/kendo-ui/api/javascript/data/model#methods-toJSON