Items.grid.gutter.rows
configurationDefines the width of the gutters between the rows.
items.grid.gutter.rows
String|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: {
gutter: {
rows: [{
maxWidth: 600,
value: 2
},
{
minWidth: 601,
maxWidth: 800,
value: 4
},
{
minWidth: 801,
maxWidth: 2800,
value: 6
}],
cols: 3
}
},
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>Defines the maximum width in pixels for the specific breakpoint gutter row value.
<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: {
gutter: {
rows: [{
maxWidth: 600,
value: 2
},
{
minWidth: 601,
maxWidth: 800,
value: 4
},
{
minWidth: 801,
maxWidth: 2800,
value: 6
}],
cols: 3
}
},
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>Defines the minimum width in pixels for the specific breakpoint gutter row value.
<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: {
gutter: {
rows: [{
maxWidth: 600,
value: 2
},
{
minWidth: 601,
maxWidth: 800,
value: 4
},
{
minWidth: 801,
maxWidth: 2800,
value: 6
}],
cols: 3
}
},
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>Defines the row gap value for the specific breakpoint.
<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: {
gutter: {
rows: [{
maxWidth: 600,
value: 2
},
{
minWidth: 601,
maxWidth: 800,
value: 4
},
{
minWidth: 801,
maxWidth: 2800,
value: 6
}],
cols: 3
}
},
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>