私のグリッドではないポップアップエディタに2つのフィールドを持たせる方法

私の剣道グリッドのポップアップエディタでは、2つのドロップダウンリストがグリッドの2つのフィールドを連結しています。それを持っている？以下に、私は私のポップでドロップダウンリストのショー（モデル&プロデューサー）アップエディタが欲しい、が、各パーツを保存する時にその場で席私のグリッドではないポップアップエディタに2つのフィールドを持たせる方法

$("#turbingrid").kendoGrid({ 
    // debugger; 

    dataSource: dataSource, 
    scrollable: false, 

    columns: [ 
       { field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' }, 
       { field: 'Producer', title: 'Producer', width: '80px', editor: ProductNameDropDownEditor, }, 
       { field: 'Model', title: 'Model', width: '220px' }, 
       { field: 'DeviceType', title: 'DeviceType', width: '100px',editor: deviceTypesList }, 
       { field: 'Description', title: 'Description', width: '220px' }, 
       { field: 'Username', title: 'Username', width: '120px' }, 
       { field: 'Password', title: 'Password', width: '100px' }, 
       { field: 'PublicIP', title: 'PublicIP', width: '120px' }, 
       { field: 'device_id', title: 'device_id', width: '120px',hidden:true }, 
       { command: ["edit"], title: "&nbsp;" }], 

    editable: "popup", 
    //edit: 
    // function() { 
    //  document.getElementsByName("DeviceIP")[0].disabled = true; 

    // }, 

     edit: function(e) { 
      e.container.find("label[for='device_id']").parent().hide(); 
      e.container.find("div[data-container-for='device_id']").hide(); 
     }                    
});

出典

2017-07-25 mortezasol

ルックでなければなりません次のコードで説明します。私はドロップダウンの代わりにテキストボックスを使用してsplitと原油デモを行ったが、そのポイントはより重要です。

イベントを使用すると、編集ポップアップのデータを準備してモデルの新しいフィールドに配置し、テンプレート内のこの新しいフィールドを使用して、最後にsaveイベントを使用して、カスタムフィールドを元のフィールドに追加します。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"/> 
 
    <title>Kendo UI Snippet</title> 
 

 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css"/> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css"/> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.silver.min.css"/> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css"/> 
 

 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script> 
 
</head> 
 
<body> 
 
    
 
<script id="popup-editor" type="text/x-kendo-template"> 
 
    <h3>Edit Person</h3> 
 
    <p> 
 
    <label>Name:<input name="name" /></label> 
 
    </p> 
 
    <p> 
 
    <label>Age: <input type="text" name="test" /></label> 
 
    </p> 
 
</script> 
 
<div id="grid"></div> 
 
<script> 
 
$("#grid").kendoGrid({ 
 
    columns: [ 
 
    { field: "name" }, 
 
    { field: "age" }, 
 
    { command: "edit" } 
 
    ], 
 
    dataSource: { 
 
    data: [ 
 
     { id: 1, name: "Jane Doe", age: 30 }, 
 
     { id: 2, name: "John Doe", age: 33 } 
 
    ], 
 
    schema: { 
 
     model: { id: "id" } 
 
    } 
 
    }, 
 
    editable: { 
 
    mode: "popup", 
 
    template: kendo.template($("#popup-editor").html()) 
 
    }, 
 
    beforeEdit: function(e) { 
 
    e.model.test = e.model.name + ", " + e.model.age.toFixed(); 
 
    }, 
 
    save: (e) => { 
 
    let values = e.model.test.split(", "); 
 
    e.model.name = values[0]; 
 
    e.model.age = parseInt(values[1]); 
 
    } 
 
}); 
 
</script> 
 
</body> 
 
</html>

出典

2017-07-25 16:25:59 Shai

私のグリッドではないポップアップエディタに2つのフィールドを持たせる方法

答えて

関連する問題