or
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