Kendo ui 网格弹出编辑器表单模板 - 如何在编辑而不是添加时隐藏某些字段

Question

我正在使用 Kendo 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。然后在网格edit 事件上，我附加了一个函数并检查是否正在编辑添加该行，如果正在编辑该行，我添加了一行代码来隐藏所有具有hide-on-edit 类的元素。

下面是我的 DEMO 中的代码 sn-p。

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