items Array
A JavaScript array that contains the Form's items configuration.
Example
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
Name: "Ivan",
Address: "Sofia"
},
items: [{
field: "Name",
label: "Name:",
validation: { required: true }
}, {
field: "Address",
label: "Address:"
}]
});
</script>
items.type String
Defines the type of the item. Available options: "group".
Example
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
FirstName: "John",
LastName: "Doe",
Address: "Sofia"
},
items: [{
type: "group",
label: "Personal Information",
items:[{
field: "FirstName",
label: "First Name:",
validation: { required: true }
},{
field: "LastName",
label: "Last Name:",
validation: { required: true }
}]
},{
type: "group",
label: "Shipping Address",
items:[{
field: "Address",
label: "Address:"
}]
}
]
});
</script>
items.field String
Maps to the model field which will be configured and sets the name of the input.
Example
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
Name: "John Doe",
Address: "Sofia"
},
items: [{
field: "Name",
validation: { required: true }
}, {
field: "Address"
}]
});
</script>
items.editor String|Function
Defines the editor widget type. Available options are:
- DropDown widgets - "AutoComplete", "DropDownList", "ComboBox", "MultiSelect", "DropDownTree", "MultiColumnComboBox"
- DatePicker widgets - "DateInput", "DatePicker", "DateTimePicker", "TimePicker"
- Input widgets - "TextBox", "TextArea", "NumericTextBox", "MaskedTextBox", "RadioGroup", "CheckBoxGroup", "Switch", "Rating", "Slider", "ColorPicker", "ColorGradient", "ColorPalette", "FlatColorPicker", "Signature", "hidden"
- Editor widget - "Editor"
Example - define editor as string
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
Name: "John Doe",
Address: 3
},
items: [{
field: "Name",
validation: { required: true }
}, {
field: "Address",
editor:"DropDownList",
editorOptions:{
dataTextField:"text",
dataValueField:"id",
dataSource: {
data: [
{text:"Sofia", id:1},
{text:"London", id:2},
{text:"New York", id:3}]
}
}
}]
});
</script>
Example - define editor as hidden
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
Name: "John Doe",
Address: 3
},
items: [{
field: "ID",
editor: "hidden"
}, {
field: "Name",
validation: { required: true }
}, {
field: "Address",
editor:"DropDownList",
editorOptions:{
dataTextField:"text",
dataValueField:"id",
dataSource: {
data: [
{text:"Sofia", id:1},
{text:"London", id:2},
{text:"New York", id:3}]
}
}
}]
});
</script>
Example - define editor as function
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
Name: "John Doe",
Address: 3
},
items: [{
field: "Name",
validation: { required: true }
}, {
field: "Address",
editor:function(container, options) {
$("<input name='" + options.field + "'data-bind='value: " + options.field + "'/>")
.appendTo(container)
.kendoDropDownList({
dataTextField:"text",
dataValueField:"id",
dataSource: {
data: [
{text:"Sofia", id:1},
{text:"London", id:2},
{text:"New York", id:3}]
}
})
}
}]
});
</script>
items.editorOptions Object
Defines the widget configuration for the specified items.editor.
Example
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
Name: "John Doe",
Address: 3
},
items: [{
field: "Name",
validation: { required: true }
}, {
field: "Address",
editor:"DropDownList",
editorOptions:{
dataTextField:"text",
dataValueField:"id",
dataSource: {
data: [
{text:"Sofia", id:1},
{text:"London", id:2},
{text:"New York", id:3}]
}
}
}]
});
</script>
items.validation Object
Specified the validation rules for the field.
Example - use built-in validation rules
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
Name: "John Doe",
Email:"john.doe@email.com"
},
validateable:{
validateOnBlur:true
},
items: [{
field: "Name",
validation: {
required: true,
pattern:"[a-z A-Z]+"
},
hint:"Only lower and upper case letters are allowed"
}, {
field: "Email",
validation: {
required: true,
email:true
}
}]
});
</script>
Example - customize the built-in validation messages
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
Name: "John Doe",
Email:"john.doe@email.com"
},
validateable:{
validateOnBlur:true
},
items: [{
field: "Name",
validation: {
required: {
message: "The field is required" },
pattern: {
value:"[a-z A-Z]+",
message:"Invalid input"}
},
hint:"Only lower and upper case letters are allowed"
}, {
field: "Email",
validation: {
required: true,
email:true
}
}]
});
</script>
Example - set custom validation rule
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
Name: "John Doe",
Comment:""
},
validateable:{
validateOnBlur:true
},
items: [{
field: "Name",
},{
field: "Comment",
validation: {
validateCommentlength:function(input){
if (input.is("[name='Comment']") && input.val() != "") {
input.attr("data-validatecommentlength-msg", "Comment must be less than 150 characters");
return input.val().length < 150;
}
return true;
}
}
}]
});
</script>
items.label String|Object
Defines the field label.
Example
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
Name: "John Doe",
Address: "Sofia"
},
items: [{
field: "Name",
label: "Full Name:",
validation: { required: true }
}, {
field: "Address",
label: "Shipping Address:"
}]
});
</script>
items.label.text String
Defines the text of the label.
Example
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
Name: "John Doe",
Address: "Sofia"
},
items: [{
field: "Name",
label: {
text: "Full Name:"
},
validation: { required: true }
}, {
field: "Address",
label: {
text: "Shipping Address:"
}
}]
});
</script>
items.label.optional Boolean
Specifies if the field is optional by rendering additional text next to the label.
Example
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
Name: "John Doe",
Address: "Sofia",
Birth: new Date()
},
items: [{
field: "Name",
label: {
text: "Full Name:"
},
validation: { required: true }
}, {
field: "Address",
label: {
text: "Shipping Address:"
}
},{
field: "Birth",
label: {
text: "Date of birth:",
optional: true
}
}]
});
</script>
items.label.encoded Boolean (default: true)
Specifies if the label text will HTML-encoded before it is displayed. If set to false the label text will be displayed as is.
Example
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
Name: "John Doe",
Address: "Sofia",
Birth: new Date(),
},
items: [{
field: "Name",
label: {
text: "Full Name:"
},
validation: { required: true }
}, {
field: "Address",
label: {
text: "Shipping Address:"
}
},{
field: "Birth",
label: {
text: "<b>Date of birth:<b>",
optional: true,
encoded: false
}
}]
});
</script>
items.id String
Defines the field id.
Example
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
Name: "John Doe",
Address: "Sofia"
},
items: [{
id: "Name_customId",
field: "Name"
}, {
id: "Address_customId",
field: "Address"
}]
});
</script>
items.title String
Defines the field title.
Example
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
Name: "John Doe",
Address: "Sofia"
},
items: [{
title: "Full Name",
field: "Name"
}, {
title: "Shipping Address",
field: "Address"
}]
});
</script>
items.hint String
Defines the hint text that will be shown underneath the form editor.
Example
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
Name: "John Doe",
Address: "Sofia"
},
items: [{
field: "Name",
hint: "Enter Full Name"
}, {
field: "Address",
hint: "Enter Address with ZIP Code"
}]
});
</script>
items.colSpan Number
Defines the field size when grid layout is used.
Example
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
FirstName: "John",
LastName: "Doe",
Address: "London",
Postcode: "SW1A 1AA"
},
layout:"grid",
grid: {
cols: 2,
gutter: 20
},
items: [{
type: "group",
label: "Personal Information",
layout: "grid",
colSpan: 2,
grid: {
cols: 6,
gutter: 10
},
items:[{
field: "FirstName",
label: "First Name:",
validation: { required: true },
colSpan: 2
},{
field: "LastName",
label: "Last Name:",
validation: { required: true },
colSpan: 4
}]
},{
type: "group",
label: "Shipping Address",
layout: "grid",
colSpan: 2,
grid: {
cols: 4,
gutter: 10
},
items:[{
field: "Address",
label: "Address:",
colSpan: 2,
},{
field: "Postcode",
label: "Postcode:",
colSpan: 2
}]
}]
});
</script>
items.attributes Object
Defines the attributes that are applied to the input element.
Example
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
Name: "John Doe",
Address: "Sofia"
},
items: [{
field: "Name",
hint: "Enter Full Name",
attributes:{
class: "myClass"
}
}, {
field: "Address",
hint: "Enter Address with ZIP Code"
}]
});
</script>
<style>
.myClass{
color:red;
}
</style>
items.layout String (default: '')
Specify the layout of the item when items.type is set to "group". Valid options:
-
grid: This is equivalent todisplay: grid. It defines the form item as a grid container and establishes a new grid formatting context for its contents.
Example
<form id="myForm"></form>
<script>
$(document).ready(function () {
$("#myForm").kendoForm({
formData: {
FirstName: "John",
LastName: "Doe",
Email: "john.doe@email.com"
},
layout: "grid",
grid: {
cols: 2,
gutter: 20
},
items: [
{
type: "group",
label: "Personal Information",
layout: "grid",
grid: { cols: 1, gutter: 10},
items: [
{
field: "FirstName",
label: "First Name:",
validation: { required: true }
},
{
field: "LastName",
label: "Last Name:",
validation: { required: true }
},
{
field: "Email",
label: "Email",
validation: {
required: true,
email: true
}
}
]
},
],
});
});
</script>
items.grid Object
Grid layout settings of the form item.
Example
<form id="myForm"></form>
<script>
$(document).ready(function () {
$("#myForm").kendoForm({
formData: {
FirstName: "John",
LastName: "Doe",
Email: "john.doe@email.com"
},
layout: "grid",
grid: {
cols: 2,
gutter: 20
},
items: [
{
type: "group",
label: "Personal Information",
layout: "grid",
grid: { cols: 1, gutter: 10},
items: [
{
field: "FirstName",
label: "First Name:",
validation: { required: true }
},
{
field: "LastName",
label: "Last Name:",
validation: { required: true }
},
{
field: "Email",
label: "Email",
validation: {
required: true,
email: true
}
}
]
},
],
});
});
</script>