New to Kendo UI for jQuery? Start a free 30-day trial

Items

configuration

A JavaScript array that contains the Form's items configuration. It enables you to specify things such as the type of input(editor) and validation rules for the input.

items

Array

<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.attributes

Object

Defines the attributes that are applied to the input element.

<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.colSpan

Number|Array

Defines the field size when grid layout is used. A fixed number defines the colspan for the form field. An array is used to map the colSpan to responsive breakpoints.

<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",
        grid: {
            cols: 6,
            gutter: 10
        },
        items:[{
            field: "FirstName",
            label: "First Name:",
            validation: { required: true },
            colSpan: [{
                maxWidth: 600,
                value: 2
            },
            {
                minWidth: 601,
                maxWidth: 1000,
                value: 4
            }]
        },{
            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.editor

String|Function

Defines the editor widget type. The valid options are as follows:

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", "OTPInput", "hidden"
Editor widget - "Editor"
Upload widget - "Upload"

Important - The casing of the editor must be exactly as shown, combobox is not the same as ComboBox.

For any other input, specify the editor as a function that returns the HTML of the element which you wish to render.

<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>

<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>

<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.

<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.field

String

Maps to the model field which will be configured and sets the name of the input.

<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.grid

Object

Grid layout settings of the form item.

<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.hint

String

Defines the hint text that will be shown underneath the form editor.

<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.id

String

Defines the field id.

<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.label

String|Object

Defines the field label.

<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.layout

String

Specify the layout of the item when items.type is set to "group". Valid options:

grid: This is equivalent to display: grid. It defines the form item as a grid container and establishes a new grid formatting context for its contents.

Default: ''

<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.title

String

Defines the field title.

<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.type

String

Defines the type of the item. Available options: "group".

<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.validation

Object

Specifies the validation rules for the field. Refer to the Validator Component for additional information about the 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>

<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>

<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>

Related Members