jQuery UI Widgets Forums Form How to generate a ‘’DropDown Tree” in jqxForm

This topic contains 6 replies, has 4 voices, and was last updated by  jalogo 3 weeks, 2 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • JenkeNg
    Participant

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


    Todor
    Participant

    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


    jalogo
    Participant

    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 Dashev
    Participant

    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


    jalogo
    Participant

    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 Dashev
    Participant

    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


    jalogo
    Participant

    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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.