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

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

by Rahul Gupta

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<!-- 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>

JavaScript

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: "&nbsp;",
                width: "200px"
            }
        ]
    });
});