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

Layout

configuration

Specify the layout of Form content. Valid options are:

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

Note: Grid layout is supported only on modern browsers. Even so, not all browsers that support grid layout support all features.

layout

String

Default: ''

<form id="myForm"></form>
<script>
$(document).ready(function () {
    $("#myForm").kendoForm({
        formData: {
            FirstName: "John",
            LastName: "Doe",
            Email: "john.doe@email.com",
            Age: 25
        },
        layout: "grid",
        grid: {
            cols: 2,
            gutter: 16
        },
        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 }
        }, {
            field: "Age",
            label: "Age:",
            validation: { required: true }
        }]
    });
});
</script>