How to generate a ‘’DropDown Tree” in jqxForm

[JenkeNgParticipant]

Can you give me an example? The official example does not seem to specify the usage of the callback function for ‘init’.
thanks！

[TodorParticipant]

Hello JenkeNg,

Please review the following example whether it fits your needs.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[jalogoParticipant]

Thanks for this example!

Is there a way to integrate the custom component into the form?

I would like to be able to use the “val” function on the form and would also like to set the value when initializing the form.
I have modified the example (http://jsfiddle.net/m8ed06L4/) to show the state value when pressing “Sign up”. It shows “Texas”, no matter what you select on the custom control.

I hope you can help.

Thanks,
Christian

[Yavor DashevParticipant]

Hi jalogo,

The functionalities that you need are quite possible with the jqxForm component.

However the jsfiddle that you have shared showcases how to integrate a custom component using the init callback which is used for further customisation.

Also I have edited the jsfiddle so that it may suit your needs regarding the use case when you want to set the value when the form is submitted.

Link to the edited fiddle: http://jsfiddle.net/y42vq39b/5/

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[jalogoParticipant]

Hi Yavor,

thanks for your quick reply! I’m not sure if I understood correctly.

I would like to be able to do the following:

1. Change the tree value to the desired value in the form. Use the val() function to retrieve the whole form including the newly set value.
2. Use the val(data) function to set the forms value. The tree should also be changed to the value of the form.

So far the custom control and the val function don’t seem to be linked.

Here’s another edited fiddle: http://jsfiddle.net/3xjabd2y/1/

I have managed to achieve 1 using the information you provided. If you change the tree value the form data is updated. If you click “Sign up”, the form data is displayed with the updated tree information.

Now I just don’t know how to achieve point 2. I can set the form data (as seen in the new button “Set state to Government”). This only updates the form. The tree item stays the same. I don’t want to update the tree item manually, as this would make the whole code very complicated.

I tried to use the formDataChange event, but it doesn’t seem to be triggered when using the val function.

Do you have any ideas, how I can update the custom control?

Best regards
Christian

[Yavor DashevParticipant]

Hi Christian,

Thank you for your reply!

For achieving point #2 I have modified furthermore the jsfiddle I have sent in my previous reply.

Link to the modified fiddle: http://jsfiddle.net/mxu02y3L/2/

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[jalogoParticipant]

Hi Yavor,

your new example requires updating the control manually. I am trying to set up a generic form, which allows the use of the val function without having to think of all of the custom controls.

Is there a way to attach the logic of changing the custom fields directly to the val function? I tried using the formDataChange event, but it is not triggered when using the val function.

Best regards
Christian

[Author]

Posts