Ability to submit if the tag is DIV

2 Answers 125 Views
Form
Aleksandr
Top achievements
Rank 1
Bronze
Bronze
Veteran
Aleksandr asked on 09 Jan 2023, 02:29 AM

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

Sort by
0
Neli
Telerik team
answered on 11 Jan 2023, 12:59 PM

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/.

Aleksandr
Top achievements
Rank 1
Bronze
Bronze
Veteran
commented on 11 Jan 2023, 04:05 PM

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

 

Neli
Telerik team
commented on 16 Jan 2023, 11:19 AM

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

Aleksandr
Top achievements
Rank 1
Bronze
Bronze
Veteran
commented on 16 Jan 2023, 02:32 PM

Neli,

thx a lot

 

Thx Alex

 

 

0
David Black
Top achievements
Rank 1
Iron
answered on 29 Sep 2023, 02:52 PM

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

Aleksandr
Top achievements
Rank 1
Bronze
Bronze
Veteran
commented on 29 Sep 2023, 03:06 PM

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>&nbsp;</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();

 

David Black
Top achievements
Rank 1
Iron
commented on 29 Sep 2023, 03:17 PM

Great, Thanks!
Tags
Form
Asked by
Aleksandr
Top achievements
Rank 1
Bronze
Bronze
Veteran
Answers by
Neli
Telerik team
David Black
Top achievements
Rank 1
Iron
Share this question
or