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

Items.grid.cols

configuration

Defines the columns of the grid.

items.grid.cols

Number|Array

<form id="myForm"></form>

<script>
    $(document).ready(function () {
        $("#myForm").kendoForm({
            formData: {
                FirstName: "John",
                LastName: "Doe",
                Email: "john.doe@email.com"
            },
            layout: "grid",
            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.cols.maxWidth

Number

Defines the maximum width in pixels for which the specific breakpoint col value for the columns applies.

<form id="myForm"></form>

<script>
    $(document).ready(function () {
        $("#myForm").kendoForm({
            formData: {
                FirstName: "John",
                LastName: "Doe",
                Email: "john.doe@email.com"
            },
            layout: "grid",
            items: [
                {
                    type: "group",
                    label: "Personal Information",
                    layout: "grid",
                    grid: {
                        cols: [{
                            maxWidth: 600,
                            value: 2
                        },
                        {
                            minWidth: 601,
                            maxWidth: 800,
                            value: 3
                        },
                        {
                            minWidth: 801,
                            maxWidth: 2800,
                            value: 4
                        }],
                        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.cols.minWidth

Number

Defines the minimum width in pixels for which the specific breakpoint col value for the columns applies.

<form id="myForm"></form>

<script>
    $(document).ready(function () {
        $("#myForm").kendoForm({
            formData: {
                FirstName: "John",
                LastName: "Doe",
                Email: "john.doe@email.com"
            },
            layout: "grid",
            items: [
                {
                    type: "group",
                    label: "Personal Information",
                    layout: "grid",
                    grid: {
                        cols: [{
                            maxWidth: 600,
                            value: 2
                        },
                        {
                            minWidth: 601,
                            maxWidth: 800,
                            value: 3
                        },
                        {
                            minWidth: 801,
                            maxWidth: 2800,
                            value: 4
                        }],
                        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.cols.value

Number

Defines the number of columns to be applied if current width of the form is between the maxWidth and minWidth values

<form id="myForm"></form>

<script>
    $(document).ready(function () {
        $("#myForm").kendoForm({
            formData: {
                FirstName: "John",
                LastName: "Doe",
                Email: "john.doe@email.com"
            },
            layout: "grid",
            items: [
                {
                    type: "group",
                    label: "Personal Information",
                    layout: "grid",
                    grid: {
                        cols: [{
                            maxWidth: 600,
                            value: 2
                        },
                        {
                            minWidth: 601,
                            maxWidth: 800,
                            value: 3
                        },
                        {
                            minWidth: 801,
                            maxWidth: 2800,
                            value: 4
                        }],
                        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>