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", "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>
In this article
Not finding the help you need? Improve this article