Я использую сетку 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"
}
]
});
});