Dynamicaly add items to a Form and use Editor

1 Answer 105 Views
Editor Form TextArea
Timo
Top achievements
Rank 1
Iron
Timo asked on 17 May 2023, 05:40 AM

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

1 Answer, 1 is accepted

Sort by
1
Accepted
Georgi Denchev
Telerik team
answered on 19 May 2023, 09:35 AM

Hello, Timo,

Thank you for the provided code snippets and details.

There is a very small typo in the Form configuration, the `items` property expects an array:

// Currently
        items: {
          type: "group",
          label: dataItem.displayName,
          items: items
        }

// Must be
        items: [{
          type: "group",
          label: dataItem.displayName,
          items: items
        }]

Dojo

https://dojo.telerik.com/@gdenchev/UKUvUraj 

Best Regards,
Georgi Denchev
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Timo
Top achievements
Rank 1
Iron
commented on 22 May 2023, 05:53 AM

OMG... Thank's a lot
Tags
Editor Form TextArea
Asked by
Timo
Top achievements
Rank 1
Iron
Answers by
Georgi Denchev
Telerik team
Share this question
or