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

Grid.gutter.rows

configuration

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

grid.gutter.rows

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

Number

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

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

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

grid.gutter.rows.minWidth

Number

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

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

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

grid.gutter.rows.value

Number

Defines the row gap value for the specific breakpoint.

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

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