Hello,
Please see the following example: https://dojo.telerik.com/UsIQijOG/10
Reproduction steps:
Expected:
Thanks,
Graham
Hello experts
How do I match the front line? (When I set kendoForm, orientation: 'horizontal')
please Answerã… ã…
link : https://docs.telerik.com/kendo-ui/api/javascript/ui/form/configuration/items#itemscolspan
<form id="myForm"></form>
<script>
$("#myForm").kendoForm({
formData: {
ID: 1,
FirstName: "John",
LastName: "Doe",
Address: "London",
Postcode: "SW1A 1AA"
},
layout:"grid",
orientation: 'horizontal',
grid: {
cols: 2,
gutter: 20
},
items: [{
type: "group",
label: "Personal Information",
layout: "grid",
colSpan: 2,
grid: {
cols: 2,
gutter: 10
},
items:[{
field: "FirstName",
label: "First Name:",
validation: { required: true },
colSpan: 1
},{
field: "LastName",
label: "Last Name:",
validation: { required: true },
colSpan: 1
},{
field: "Addresss",
label: "Address:",
validation: { required: true },
colSpan: 2
},{
field: "Postcodee",
label: "Postcode:",
validation: { required: true },
colSpan: 2
}]
},{
type: "group",
label: "Shipping Address",
layout: "grid",
colSpan: 2,
grid: {
cols: 4,
gutter: 10
},
items:[{
field: "Address",
label: "Address:",
colSpan: 2,
},{
field: "Postcode",
label: "Postcode:",
colSpan: 2
}]
}]
});
</script>