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
2 Answers, 1 is accepted
Hi Aleksandr,
1. As mentioned in the documentation, the Form should be initialized from '<form>' element
- https://docs.telerik.com/kendo-ui/controls/layout/form/overview#initializing-the-form
2. When a Form is submitted you can get the submitted model in the submit event handler:
- https://docs.telerik.com/kendo-ui/api/javascript/ui/form/events/submit
submit: function(ev) {
console.log(ev.model);
}Let me know in case you have any additional question on the matter.
Regards,
Neli
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Bronze
Bronze
Veteran
Hello Neli,
thx a lot for your reply, I know how it has to work according to the documentation, but such a design significantly limits the possible usages, for example, if we work with old asp.net forms the asp.net creates the main parent form and all the controls are inside it, unfortunately, Telerik forms control does not work when the form tag is nested (what is correct), that is why i have switched to div & found a workaround to make it work, but having it out of the box would be preferable, please take my post as a future request, it does not require too much work & will make forms control more robust
Thx Alex
Hi Aleksandr,
Thank you for the feedback. I logged a Feature Request on your behalf and below you will find a link to the item in our Feedback Portal:
- https://feedback.telerik.com/kendo-jquery-ui/1593750-ability-to-submit-form-if-the-tag-is-div
We will keep monitoring the community's interest in the issue.
Regards,
Neli
Rank 1
Bronze
Bronze
Veteran
Neli,
thx a lot
Thx Alex
Rank 1
Iron
Hi Aleksandr,
I have the same problem, I'm using the form with an old asp.net app.
How do you solve this problem?
Regards,
David
Rank 1
Bronze
Bronze
Veteran
this is ascx control code i use to build the forms
<div id="<%= this.ID %>_editPopupWindow" style="display: none; padding: 0; overflow: hidden; width: 1000px;">
<table width="100%" style="border: 0px solid gray;" class="PanelBordered" role="presentation">
<tr>
<td> </td>
</tr>
<tr>
<td>
<div class="header_title">
<%= this.Title %>
</div>
</td>
</tr>
<tr>
<td>
<div id="<%= this.ID %>_editForm" style="margin: 0 15px 15px 15px;"></div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function EditController(siteRoot, apiControllerPath, entityName, items, colls) {
this.apiUrl = siteRoot + apiControllerPath;
this.apiUrlGlossary = siteRoot + "api/Glossary/";
this.entityName = entityName;
this.items = items;
this.calls = colls;
this.Initialize = function () {
this.setEditorsFormat();
this.mainForm = this.BuildMainForm();
this.mainPopup = this.BuildPopupWindow();
};
this.setEditorsFormat = function () {
if (this.items && this.items.length > 0) {
this.items.forEach(function (subItems) {
if (subItems.items && subItems.items.length > 0) {
subItems.items.forEach(function (elem) {
if (elem.editor === "DatePicker") {
elem.editorOptions = elem.editorOptions ?? {};
elem.editorOptions.format = "MM/dd/yyyy";
}
});
}
});
}
}
this.ShowCreateOrEditWindow = function (itemId, closeCallback, isCopy) {
this.closeCallback = closeCallback;
this.itemId = itemId;
this.isCopy = isCopy;
this.mainPopup
.open()
.center();
this.FormDataGet(this.itemId, this.isCopy);
};
this.FormDataGet = function (itemId, isCopy) {
kendo.ui.progress($("#<%= this.ID %>_editPopupWindow").data("kendoWindow").wrapper, true);
$.ajax({
dataType: "json",
url: this.apiUrl + "Get?" + $.param({ id: itemId, isCopy: isCopy == 1 ? true : false })
})
.fail(function (error) {
kendo.ui.progress($("#<%= this.ID %>_editPopupWindow").data("kendoWindow").wrapper, false);
KendoGridHelper.alert(error.responseText, function () {
LocalKendoGridHelper.HandleAjaxError(error);
});
})
.done(function (data) {
this.mainForm.setOptions({ formData: data });
this.BindClickEvents();
kendo.ui.progress($("#<%= this.ID %>_editPopupWindow").data("kendoWindow").wrapper, false);
}.bind(this));
};
this.BuildMainForm = function () {
var form = $("#<%= this.ID %>_editForm").kendoForm({
layout: "grid",
grid: {
cols: this.calls,
gutter: 20
},
buttonsTemplate: "<button id='<%= this.ID %>_editFormSubmit' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-button-solid-primary'>Save</button><button id='<%= this.ID %>_editFormCancel' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'>Cancel</button>",
items: this.items,
}).data("kendoForm");
return form;
};
this.BuildPopupWindow = function () {
var popup = $("#<%= this.ID %>_editPopupWindow")
.kendoWindow({
title: this.entityName + " Information",
modal: true,
visible: false,
resizable: false,
//width: 1500
})
.data("kendoWindow");
popup.bind("close", function (e) {
// NOTE: refresh grid on opener
if (this.closeCallback && typeof this.closeCallback === "function") {
this.closeCallback();
delete this.closeCallback;
}
}.bind(this));
return popup;
};
this.BindClickEvents = function () {
$("#<%= this.ID %>_editFormSubmit").click(function () {
if (this.mainForm.validate()) {
kendo.ui.progress($("#<%= this.ID %>_editPopupWindow").data("kendoWindow").wrapper, true);
TimeCorrector.CorrectObjectBeforeSave(this.mainForm._model);
var model = JSON.stringify(this.mainForm._model);
console.log(model);
$.ajax({
type: "POST",
url: this.apiUrl + "CreateOrUpdate",
contentType: "application/json; charset=utf-8",
data: model,
dataType: "json"
})
.fail(function (error) {
kendo.ui.progress($("#<%= this.ID %>_editPopupWindow").data("kendoWindow").wrapper, false);
KendoGridHelper.alert(error.responseText, function () {
LocalKendoGridHelper.HandleAjaxError(error);
});
})
.done(function () {
kendo.ui.progress($("#<%= this.ID %>_editPopupWindow").data("kendoWindow").wrapper, false);
var message = this.itemId > 0 && !this.isCopy ? this.entityName + " has been updated successfully" : this.entityName + " has been added successfully"
$("<div></div>")
.kendoDialog({
title: "INFORMATION",
content: message,
width: "400px",
actions: [
{
text: "OK",
primary: true
}
],
close: function () {
this.mainForm.setOptions({ formData: {} });
this.mainPopup.close();
}.bind(this)
}).data("kendoDialog")
.open()
.wrapper
.find('.k-window-title')
.css("text-align", "center");
}.bind(this));
}
}.bind(this));
$("#<%= this.ID %>_editFormCancel").click(function () {
this.mainPopup.close();
this.mainForm.setOptions({ formData: {} });
}.bind(this));
};
this.Initialize();
}
let EditFormBuilders = {
BuildCheckBoxEditor: function (container, options) {
$('<label for="' + options.field + '" class="k-checkbox-label" style="display:block;">' + options.label + '</label>' +
'<input type="checkbox" id="' + options.field + '" data-role="checkbox" class= "k-checkbox k-checkbox-md k-rounded-md"' +
'data-bind="checked: ' + options.field + '">').appendTo(container);
},
BuildLabel: function (container, options) {
$('<span id="' + options.field + '" data-bind="text: ' + options.field + '"></span>').appendTo(container);
}
}
</script>
<style>
.k-form-field .k-form-field-wrap .k-checkbox-label,
.k-form-layout .k-form-fieldset .k-form-legend,
.k-label.k-form-label {
font-weight: bold;
}
.k-form .k-form-buttons {
justify-content: center;
}
.header_title {
margin: 0 !important;
}
span[id*='editPopupWindow_wnd_title'] {
font-size: 1.75em;
}
</style>as you can see, i just use template to create my own buttons
buttonsTemplate: "<button id='<%= this.ID %>_editFormSubmit' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-button-solid-primary'>Save</button><button id='<%= this.ID %>_editFormCancel' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'>Cancel</button>"
and then bind click to them
this.BindClickEvents();