Kendo ui grid popup editor form template - how to hide some fields on edit and not on add

Question

I am using Kendo UI grid and using a custom template for popup add / edit form . Here is my DEMO .

Only while editing the record, in the popup form I want to hide FirstName and LastName input fields and not on Add.

Does anyone know how can this be done? Thanks.

Below is my 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

Finally, this is how I achieved it. Here is the updated DEMO .

I added a class hide-on-edit on all the elements that I needed to hide in popup edit form. Then on grid edit event I attached a function and checked if the row is being edited to added and if the row is being edited, I added a line of code to hide all the elements with hide-on-edit class.

Below is the code snippet from from my DEMO.

HTML:

For the fields FirstName and LastName added new class 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:

Attached a function to the grid's edit event.

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