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

Grid.gutter.cols

configuration

Defines the width of the gutters between the columns. When an array is used, it is mapped to set the gutter between the columns for the provided responsive breakpoints.

grid.gutter.cols

String|Number|Array

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

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

grid.gutter.cols.maxWidth

Number

Defines the maximum width in pixels for the specific breakpoint gutter col value.

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

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

grid.gutter.cols.minWidth

Number

Defines the minimum width in pixels for the specific breakpoint gutter col value.

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

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

grid.gutter.cols.value

Number

Defines the col gap value for the specific breakpoint.

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

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