Hi everyone,
I have a group of cascading Dropdownlists. After selecting the values I want to create a Form and add the choosen values as items to the form.
Some Items need to be a WYSIWYG-Editor, so I try to add the kendoEditor as custom editor:
var data = {};
var items = [];
sender.dataItem.content.forEach((content) => {
data[content.key] = content.text;
if (content.type == 'TextArea') {
items.push({
field: content.key,
label: content.displayName,
editor: function(container, options) {
$("<textarea class='k-textarea' name='" + content.key + "' required data-bind='value: " + content.key + "'></textarea>")
.appendTo(container)
.kendoEditor();
}
});
} else {
items.push({
id: sender.dataItem.name + '_' + content.key,
field: content.key,
label: content.displayName,
validation: { required: true},
editor: content.type
});
}
});
var validationSuccess = $("#validation-success");
$("#contentForm").kendoForm({
orientation: "horizontal",
formData: data,
items: {
type: "group",
label: sender.dataItem.displayName,
items: items
},
validateField: function (e) {
validationSuccess.html("");
},
submit: function (e) {
e.preventDefault();
validationSuccess.html("<div class='k-messagebox k-messagebox-success'>Änderungen gespeichert");
},
clear: function (e) {
validationSuccess.html("");
}
});
sender.dataItem looks like this:
{
"name": "maintenance",
"displayName": "Wartungsseite",
"content": [
{
"displayName": "Überschrift",
"key": "header",
"text": "Wartungsarbeiten",
"type": "TextBox"
},
{
"displayName": "Wartungstext",
"key": "text",
"text": "Wir arbeiten für Sie! <br /><br />Aktuell ist unser Kundenportal \"Meine WSW\" aufgrund von gesetzlichen Wartungsarbeiten für kurze Zeit offline.<br /><br />Gerne können Sie uns in der Zwischenzeit mit Angabe Ihrer Kunden- und Vertragskontonummer eine Email an <a href=\"mailto:meinewsw@wsw-online.de\">meinewsw(at)wsw-online.de</a> schreiben. <br /><br /> <br />Vielen Dank für Ihr Verständnis!<br /><br />Ihr WSW-Team",
"type": "TextArea"
}
]
}
Though the items are added to the form, the item for key "text" is a simple input of type text and no editor.
Kind regards
Timo Wied
I have a grid with editable cell inside bootstrap modal pop up, all text and dropdown cell works fine except for the number field.
When clicked on the number cell the input opens but value is showing inside, value is updated and reflects back on the grid, applies all the validation but just value is not showing the input field.
I checked everything but could not figure this one out.var _dataSource = new kendo.data.DataSource({
data: localityGridDataSource,
sort: { field: 'nodeLocalitySequence', dir: 'asc' },
autoSync: true,
schema: {
model: {
id: 'localityCode',
fields: {
localityCode: { editable: false },
localityTitle: { editable: false },
nodeLocalitySequence: { type: 'number', validation: { required: true, min: 1, max: 999999 } },
nodeLocalityType: { defaultValue: { nodeLocalityTypeValue: 'I', nodeLocalityTypeName: app.localize('InsideGrid') } },
nodeLocalityExternalNote: { type: 'text' }
}
}
}
});
_LocalitiesGrid.kendoGrid({
dataSource: _dataSource,
editable: true,
noRecords: true,
edit: onGridEditing,
remove: clearLocalitiesAudioMessage,
columns: [
{ field: 'localityTitle', title: app.localize('Locality') },
{ field: 'nodeLocalitySequence', title: app.localize('Order') },
{ field: 'nodeLocalityType', title: app.localize('IncludeType'), editor: nodeLocalityTypeDropDownEditor, template: '#=nodeLocalityType.nodeLocalityTypeName#', width: '250px' },
{ field: 'nodeLocalityExternalNote', title: app.localize('Notes') },
{ command: ["destroy"], width: '125px' }
]
});
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>