Questions on Kendo UI for jQuery Forum

0 answers

11 views

Looping between fields only on some devices.

Hi there! I'm not a developer but working with one to try and get a fix for my web application. This specific issue is not happening on any desktop computer but appears to be happening on my MacBook Pro when using Safari (not Chrome) and my 5th Gen iPad in both Safari and Chrome. When access a specific section of the program it begins to 'tab' through every field on that page endlessly. When I check the network log it states 'PerformValidationActions' appears to be in a loop cycling through 'text1_enter' 'text1_leave' 'text2_enter' 'text2_leave' 'text3_enter' 'text3_leave' etc. It EVENTUALLY ends but then when you try to log out you get the error Object reference not set to an instance of an object.

Any help would be GREATLY appreciated!

Form

Validation

asked on 28 Mar 2024

1 answer

38 views

Disable all inputs on kendo form

Hello.

I have a custom submit() method for my kendoForm. I want to programmatically go through the form and disable all inputs on the form when I submit. how can I achieve this?

Form

answered on 15 Jan 2024

1 answer

28 views

Feature request - add event to indicate when all remote requests done & data was bound

including cascade DDLs, it will help to manage submit buttons (enable/disable) & make sure that the data was loaded & set before the user can take any action

Form

answered on 09 Jan 2024

1 answer

33 views

Kendo Form with empty datepicker field

If you look at the demo of the Kendo Form the date value works great when you populate the date. If you have an empty date the calendar icon does not appear and you don't get the datepicker.

https://demos.telerik.com/kendo-ui/form/index

How do I tell the form to present a datepicker field when the date field is empty?

It appears that if the field Label has 'Date' in it it assumes its a date field, but not if its left blank.

I can assign the field to to kendodatepicker but the calendar icon is then in the misplaced.

I modified the demo to show what I am talking about in the attached.

Date/Time Pickers

Form

General Discussions

answered on 13 Nov 2023

2 answers

115 views

Ability to submit if the tag is DIV

seems just work perfectly if the tag is FORM, if div, submit will not be fired, would be great to have one of two options:

1 - use div tag (all works well except submit)

2 - give the ability to get a model from the form, like when submitting (e.model), form.model or form.model(), now have to form._model & get to string & back to json to be able to post

P.S some time we cant use form tag to do not have it nested

Form

answered on 29 Sep 2023

0 answers

45 views

When using ColSpan in Kendo Form, the output looks strange.

Hello, kendo practitioners! I always get a lot of help.
While creating an input form using KendoForm, I used colSpan to create a 2-space field, but it is displayed out of proportion as shown below.

The field's label area is displayed larger.

The code was written as follows.

$('#grid').kendoForm({
    grid: {
        cols: 4,
        gutter: 20
        },
    items: [{
               field: "field1",
               label: "Field1"
            },{
               field: "field2",
               label: "Field2"
            },{
               field: "field3",
               label: "Field3",
               colSpan: 2
            }]
});

Is there any way to solve this?

Form

updated question on 27 Sep 2023

1 answer

71 views

I want to know how to limit the number of checkboxes per row in the CheckBoxGroup function.

(Before getting into the article, I apologize for my poor English skills.)

Hello! you guys always help me.

I need to create checkboxes using kendoCheckBoxGroup function in specific fields of KendoForm.

However, it should be limited to 4 per line, not listed in one line.

Expressing it pictorially is as follows:

(Note, the text that goes into the field will vary in length.)

And, the code I'm working on is below.

var items = [
        {value: "item1", label: "Item 1"},
        {value: "item2", label: "Item 2"},
        {value: "item3", label: "Item 3"},
        ...
        {value: "item14", label: "Item 14"},
    ];

$('#checkBoxField').kendoCheckBoxGroup({
    items: items,
    layout: "horizontal"
});

How can I modify it to make it work the way I want?

Thank you as always for your kindness!

answered on 22 Aug 2023

1 answer

68 views

How can I merge 2 fields in KendoForm?

Hello Kendo practitioners!
I'm currently working on creating a complex input field.
As shown below, I want to input 3 fields in 4 columns, and I want to make the 2nd field use 2 columns.

So I tried writing code like this, but it didn't work.

            $("#baseForm").kendoForm({
                orientation: "horizontal",
                layout: "grid",
                grid: {
                    cols: 4,
                    gutter: 0
                },
                items: [
                            {
                                field: "field1",
                                label: "field1",
                            },
                            {
                                field: "field2",
                                label: "field2",
                                attributes : {colspan: 2}
                            },
                            {
                                field: "field3",
                                label: "field3",
                            },
                        ],
                buttonsTemplate:'',
                submit: function(e) {
                    e.preventDefault();
                }
            });

How can i solve this problem?
Thank you very much for your help!

Form

answered on 15 Aug 2023

1 answer

96 views

Dynamicaly add items to a Form and use Editor

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

Editor

Form

TextArea

answered on 19 May 2023

1 answer

108 views

Remove files from a Kendo UI Upload programatically

Hi Guys,

Is there a quick way to remove files from a Kendo UI Upload plus fire the corresponding remove request on the server? I have a Kendo UI Form where I added the Kendo Upload. When the user clicks the Clear button in the form, the files are removed from the list however the remove request is not fired thus, the uploaded files are still in the server.

This is the code snippet on how I have added the kendo upload to the kendo form:

$('<input type="file" name="' + options.field + '" id="' + options.field + '"/>').appendTo(container)
                .kendoUpload({
                    multiple: false,
                    async: {
                        saveUrl: "/api/upload/save",
                        removeUrl: "/api/upload/remove"
                    },
                    validation: {
                        allowedExtensions: [".jpg", ".gif"]
                    },
                    upload: (e: kendo.ui.UploadUploadEvent) => {
                        e.data = { uploadId: this._uploadId };
                    },
                    remove: (e: kendo.ui.UploadRemoveEvent) => {
                        e.data = { uploadId: this._uploadId };
                    },
                    success: (e: kendo.ui.UploadSuccessEvent) => {
                        this.enableSubmit(e.operation === 'upload');
                    }
                })