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.
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
(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!
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();
}
});
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
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');
}
})
I have tried using the removeAllFiles() or removeFile() but doesn't seem to do any request calls.
Hoping to hear from you soon.
Kindest regards, Ruby.
Hello,
Please see the following example: https://dojo.telerik.com/UsIQijOG/10
Reproduction steps:
Expected:
Thanks,
Graham