Items.grid
configurationGrid layout settings of the form item.
items.grid
Object<form id="myForm"></form>
<script>
$(document).ready(function () {
$("#myForm").kendoForm({
formData: {
FirstName: "John",
LastName: "Doe",
Email: "john.doe@email.com"
},
layout: "grid",
grid: {
cols: 2,
gutter: 20
},
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
Number|ArrayDefines the columns of the grid.
<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.gutter
Number|String|ObjectDefines the width of the gutters between the columns / rows.
<form id="myForm"></form>
<script>
$(document).ready(function () {
$("#myForm").kendoForm({
formData: {
FirstName: "John",
LastName: "Doe",
Email: "john.doe@email.com"
},
items: [{
type: "group",
label: "Personal Information",
layout: "grid",
grid: {
cols: 2,
gutter: 20
},
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>Related Members
- items.grid.cols - Defines the columns of the grid.
- items.grid.gutter - Defines the width of the gutters between the columns / rows.