Form Inside a Window Binding Issues

[Graham]

Hello,

Please see the following example: https://dojo.telerik.com/UsIQijOG/10

Reproduction steps:

1. Open the console.
2. Run the program
3. Press the button.
4. Enter "Test" into the Name field.
5. Press submit.
6. The name field in the console is empty.

Expected:

1. The name field in the console is databound to the textbox in the window.
2. The name field should be populated with the value entered into the name textbox.

 

Thanks,

Graham

[Georgi Denchev]

Hello, Graham,

Thank you for the provided Dojo and details.

Explanation

The initial options of the Kendo components can be modified only through the setOptions method. Every property/field inside the `options` object should be considered as constant(meaning that the initial value will never change).

// The properties inside `options` never change(unless setOptions is used).
$("#exampleform").data("kendoForm").options

Solution

The correct approach to access the updated value in the submit event is through the event data itself:

                  submit: function(e) {
                      e.preventDefault();
                      console.log(e.model)
                  }

Dojo

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

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik

[Graham]

Hey Georgi,

 

Thanks for the reply. That is an acceptable solution for when a form is submitted.

However, I often have a need to access form data before the submit event is triggered.

 

Please see the following example: https://dojo.telerik.com/aDodeKAp/4

Reproduction Steps:

1. Run the program.
2. Press the button.
3. Enter "Test" into the name field.
4. Check the duplicate checkbox.
5. The fields are cleared

Expected Behavior:

1. The fields should not be cleared, but set to the values currently set in the form.

 

Constraints:

1. There is a variety of work around solutions to this problem. For example, you could add html IDs to all the inputs in the form. Then lookup the values of the inputs using a jquery lookup. Or, we could introduce databinding for this specific example. Just databind the "duplicatedName" field to the "name" field.
2. These solutions are incorrect. They offer a particular solution to a particular problem. Ultimately, they feel like workarounds to a core concept I'm trying to solve.
3. The goal here is to access the data within a kendo form using the functions provided by a kendo form itself.
4. Is this possible?

 

Thank you again,

Graham

[Georgi Denchev]

Hi, Graham,

Thank you for clarifying the requirement.

In this scenario, you could edit the underlying internal model field and update its value with the help of the set method:

            $("#duplicate").on("change", function(e) {
              	var form = $("#exampleform").data("kendoForm");
                form._model.set("duplicatedName", form._model.name);
            });

Dojo

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

Let me know if this is what you're after.

Best Regards,

Georgi

[Graham]

Hey Georgi,

 

I think this is sufficient.

I noticed that _model is private and subject to change in future kendo versions.

This is something to keep in mind.

 

Thank you,

Graham