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

Grid.cols

configuration

A number defines the columns of the grid. When an array is used it is used to map the columns to the provided responsive breakpoints.

grid.cols

Number|Array

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

<script>
    $("#myForm").kendoForm({
        formData: {
            ID: 1,
            Name: "Ivan",
            Address: "Sofia"
        },
        layout: "grid",
        grid: {
            cols: 2,
            gutter: 10,
            rows: 1
        },
        items: [{
            field: "Name",
            label: "Name:"
        }, {
            field: "Address",
            label: "Address:"
        }]
    });
</script>

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

<script>
    $("#myForm").kendoForm({
        formData: {
            ID: 1,
            Name: "Ivan",
            Address: "Sofia"
        },
        layout: "grid",
        grid: {
            cols: [{
                maxWidth: 600,
                value: 2
            },
            {
                minWidth: 601,
                maxWidth: 800,
                value: 3
            },
            {
                minWidth: 801,
                maxWidth: 2800,
                value: 4
            }],
            gutter: 10,
            rows: 1
        },
        items: [{
            field: "Name",
            label: "Name:"
        }, {
            field: "Address",
            label: "Address:"
        }]
    });
</script>

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>
    $("#myForm").kendoForm({
        formData: {
            ID: 1,
            Name: "Ivan",
            Address: "Sofia"
        },
        layout: "grid",
        grid: {
            cols: [{
                maxWidth: 600,
                value: 2
            },
            {
                minWidth: 601,
                maxWidth: 800,
                value: 3
            },
            {
                minWidth: 801,
                maxWidth: 2800,
                value: 4
            }],
            gutter: 10,
            rows: 1
        },
        items: [{
            field: "Name",
            label: "Name:"
        }, {
            field: "Address",
            label: "Address:"
        }]
    });
</script>

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>
    $("#myForm").kendoForm({
        formData: {
            ID: 1,
            Name: "Ivan",
            Address: "Sofia"
        },
        layout: "grid",
        grid: {
            cols: [{
                maxWidth: 600,
                value: 2
            },
            {
                minWidth: 601,
                maxWidth: 800,
                value: 3
            },
            {
                minWidth: 801,
                maxWidth: 2800,
                value: 4
            }],
            gutter: 10,
            rows: 1
        },
        items: [{
            field: "Name",
            label: "Name:"
        }, {
            field: "Address",
            label: "Address:"
        }]
    });
</script>

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>
    $("#myForm").kendoForm({
        formData: {
            ID: 1,
            Name: "Ivan",
            Address: "Sofia"
        },
        layout: "grid",
        grid: {
            cols: [{
                maxWidth: 600,
                value: 2
            },
            {
                minWidth: 601,
                maxWidth: 800,
                value: 3
            },
            {
                minWidth: 801,
                maxWidth: 2800,
                value: 4
            }],
            gutter: 10,
            rows: 1
        },
        items: [{
            field: "Name",
            label: "Name:"
        }, {
            field: "Address",
            label: "Address:"
        }]
    });
</script>