Kendo grille modèle popup ui formulaire éditeur - comment cacher certains champs modifier et non ajouter

Question

J'utilise l'interface utilisateur grille Kendo et en utilisant un modèle personnalisé pour pop-up ajouter/modifier la forme. Voici mon DEMO.

Seulement lors de la modification de l'enregistrement, dans la forme popup je veux cacher FirstName et LastName champs de saisie et non sur Ajouter.

Est-ce que quelqu'un sait comment cela peut-il être fait? Merci.

Ci-dessous mon code:

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

Enfin, voici comment je l'ai réalisé. Voici la mise à jour DEMO.

J'ai ajouté une classe hide-on-edit sur tous les éléments que j'avais besoin de cacher dans le formulaire d'édition contextuel. Puis sur la grille edit événement j'ai attaché une fonction et vérifié si la ligne est en cours d'édition à ajouter et si la ligne est en cours d'édition, j'ai ajouté une ligne de code pour masquer tous les éléments avec hide-on-edit classe.

Ci-dessous l'extrait de code de ma DEMO.

HTML:

Pour les champs FirstName et LastName a ajouté une nouvelle classe 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:

fonction Ci-joint à l'événement edit de la grille.

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