如何獲取模態窗口（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