Шаблон формы всплывающего окна редактора сетки пользовательского интерфейса Kendo - как скрыть некоторые поля при редактировании, а не при добавлении

Я использую сетку 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: "&nbsp;",
                width: "200px"
            }
        ]
    });
});

person Rahul Gupta    schedule 06.10.2017    source источник


Ответы (1)


Наконец, вот как я этого добился. Вот обновленная DEMO.

Я добавил класс hide-on-edit ко всем элементам, которые мне нужно было скрыть в форме редактирования всплывающего окна. Затем к событию сетки 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();
            }
        },
person Rahul Gupta    schedule 10.10.2017
comment
Я потратил целый день на поиски доступа к данным родительской модели для вложенной сетки с шаблонами редактора во время выполнения. Это идеальное решение для редактирования шаблона редактора в событии редактирования. Благодарю вас! - person Shawn Gavett; 09.07.2020