How to get dataItem of modal window (Kendo-UI)

Question

I'm trying to get an instance of the current modal window (to save the data of the modal window to a file). But no success. I tried to do this via onActivate and then console.log($(this));

What is the correct method for doing this? Or I should have filled the data via template and then use content property of the kendoWindow ? THX!

Grid:

   $("#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>

Modal window:

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

Fill in data:

       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

The provided information suggests that the Window holds one data item from the Grid, which is displayed when the user clicks on a button inside a Grid row. In this case, it will be a lot easier to retrieve the desired information from the Grid's data item, instead of the Window's content. The Grid data item is available in the dItem variable.

If you want to save the Customer information after the user has edited it, then consider using the Grid's built-in popup editing and the save event. In this way, the Grid data item will always hold the latest values.

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

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

It is also possible to use popup editing with a custom popup edit form template:

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

Finally, in order to get a data item with the Kendo UI-related stuff inside, use toJSON() to get a plain object:

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