2016-08-10 10 views
0

現在のモーダルウィンドウのインスタンスを取得しようとしています(モーダルウィンドウのデータをファイルに保存しようとしています)。しかし、成功はありません。私はonActivateを介してこれをやろうとしましたが、console.log($(this));モーダルウィンドウのデータ項目の取得方法(剣道UI)

これを行う正しい方法は何ですか?または、私はテンプレートを介してデータを入力し、kendoWindowのコンテンツプロパティを使用する必要がありますか? THX!

グリッド:

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

答えて

0

提供される情報は、ウィンドウは、ユーザがグリッド列内のボタンをクリックしたときに表示されるグリッドからの1つのデータ項目を保持していることを示唆しています。この場合、Windowのコンテンツではなく、Gridのデータ項目から目的の情報を取得する方がはるかに簡単です。グリッドデータ項目はdItem変数で使用できます。

ユーザーが編集した後に顧客情報を保存する場合は、Gridの組み込みポップアップ編集とsaveイベントの使用を検討してください。このようにして、Gridデータ項目は常に最新の値を保持します。

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

内部の剣道のUI関連のものは、平文オブジェクトを取得するためにtoJSON()を使用してください:

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