剑道UI电网弹出编辑表单模板 - 如何隐藏编辑某些字段，而不是添加

Question

我使用的剑道UI网格和使用弹出添加/编辑表单一个自定义模板。这是我的DEMO。

只有在编辑记录，在弹出的形式我想隐藏FirstName和LastName输入字段，而不是添加。

有谁知道这怎么办？谢谢。

下面是我的代码：

HTML：

<!-- grid element --> 
<div id="grid" style="width: 700px; margin: 0 auto;"></div> 

<!-- popup editor template --> 
<script id="popup_editor" type="text/x-kendo-template"> 
    <p>Custom editor template</p> 
    <div class="k-edit-label"> 
     <label for="FirstName">First Name</label> 
    </div> 
    <!-- autoComplete editor for field: "FirstName" --> 
    <input type="text" class="k-input k-textbox" data-bind="value:FirstName"/> 

    <div class="k-edit-label"> 
     <label for="LastName" style="color: red;">Last Name</label> 
    </div> 
    <input type="text" class="k-input k-textbox" name="LastName" data-bind="value:LastName"> 

    <div class="k-edit-label"> 
     <label for="BirthDate">Birth Date</label> 
    </div> 
    <!-- datepicker editor for field: "BirthDate" --> 
    <input type="text" 
     name="BirthDate" 
     data-type="date" 
     data-bind="value:BirthDate" 
     data-role="datepicker" /> 

    <div class="k-edit-label"> 
     <label for="Age">Age</label> 
    </div> 
    <!-- numeric textbox editor for field: "Age" --> 
    <input type="text" name="Age" data-type="number" data-bind="value:Age" data-role="numerictextbox" /> 

</script> 

JS：

var data = createRandomData(50); 
//console.log(data); 
$(document).ready(function() { 
    $("#grid").kendoGrid({ 
     dataSource: { 
      data: data, 
      schema: { 
       model: { 
        id: "Id", 
        fields: { 
         Id: { type: "number", editable:false, nullable: true}, 
         FirstName: { type: "string" }, 
         LastName: { type: "string" }, 
         City: { type: "string" }, 
         Title: { type: "string" }, 
         BirthDate: { type: "date" }, 
         Age: { type: "number" } 
        } 
       } 
      }, 
      pageSize: 10 
     }, 
     height: 450, 
     scrollable: true, 
     sortable: true, 
     pageable: true, 
     editable: { 
      mode: "popup", 
      template: kendo.template($("#popup_editor").html()) 
     }, 
     toolbar: ["create"], 
     columns: [ 
      { 
       field: "FirstName", 
       title: "First Name", 
       width: 100 
      }, 
      { 
       field: "BirthDate", 
       title: "Birth Date", 
       template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #' 
      }, 
      { 
       field: "Age", 
       width: 100 
      }, 
      { 
       command: ["edit", "destroy"], 
       title: " ", 
       width: "200px" 
      } 
     ] 
    }); 
}); 

Answer 1

最后，我这是怎么实现它。这里是更新的DEMO。

我在需要隐藏在弹出编辑窗体中的所有元素上添加了一个类hide-on-edit。然后在grid edit事件中，我附加了一个函数，并检查该行是否正在被编辑添加，如果该行正在编辑，我添加了一行代码以隐藏所有类为hide-on-edit的元素。

以下是我的DEMO代码片段。

HTML：

对于场FirstName和LastName增加了新的类hide-on-edit

<p>Custom editor template</p> 
    <div class="k-edit-label hide-on-edit"> 
     <label for="FirstName">First Name</label> 
    </div> 
    <!-- autoComplete editor for field: "FirstName" --> 
    <input type="text" class="k-input k-textbox hide-on-edit" data-bind="value:FirstName"/> 

    <div class="k-edit-label hide-on-edit"> 
     <label for="LastName" style="color: red;">Last Name</label> 
    </div> 
    <input type="text" class="k-input k-textbox hide-on-edit" name="LastName" data-bind="value:LastName"> 

JS：

附加到网格的edit事件的功能。

$("#grid").kendoGrid({ 
...... 
........ 
//On click Add/Edit button 
     edit: function(e) { 
      //Change window title 
      if (e.model.isNew())// If the new record is being added 
      { 
       $(".k-window-title").text("Add New Record"); 
      } 
      else// If the record is being edited 
      { 
       $(".k-window-title").text("Edit Record"); 
       //hide all the elements with class "hide-on-edit" on edit 
       e.container.find('.hide-on-edit').hide(); 
      } 
     },