jQuery UI Widgets Forums Angular Dynamic Theme switching not working for some components

This topic contains 3 replies, has 2 voices, and was last updated by  JohnBucher 2 years, 4 months ago.

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

  • JohnBucher
    Participant

    Hello,
    I am currently trying to enable Dynamic Theme Switching for my jQWidget page and and for the most part many of the jQWidgets ARE switching as intended. The two problem components (that I at least know of) are jqxDropDownList and jqxGrid.

    To focus on jqxDropDownList here is my code:

    <select [(ngModel)]="theme">
        <option value='orange'>Orange</option>
        <option value='blue'>Blue</option>
    </select>
    <jqxDropDownList [width]="200" [height]="height" [(source)]="source" [selectedIndex]="0" [(theme)]="theme">
    	</jqxDropDownList>

    theme is of type string and source is an array of strings

    This section of code will NOT work and will hold onto the starting theme CSS classes and will not pickup the changes to the theme variable.

    BUT if you remove the source property from the DropDownList, resulting in a blank DropDownList, then it WILL correctly switch themes as intended as seen in the code below:

    <select [(ngModel)]="theme">
        <option value='orange'>Orange</option>
        <option value='blue'>Blue</option>
    </select>
    <jqxDropDownList [width]="200" [height]="height" [(source)]="source" [selectedIndex]="0" [(theme)]="theme">
    	</jqxDropDownList>

    Is this intended behavior and if so how do I get around this issue?

    Thank you for your time!

    • This topic was modified 2 years, 5 months ago by  JohnBucher.

    JohnBucher
    Participant

    I was trying to Edit my post to get my formatting right and it seems to have locked me out so the second code snippet is slightly off because I was copying the first code section that was formatting correctly. The correct second code snippet is as follows:

    <select [(ngModel)]="theme">
        <option value='orange'>Orange</option>
        <option value='blue'>Blue</option>
    </select>
    
    <jqxDropDownList [width]="200" [height]="height" [selectedIndex]="0" [(theme)]="theme">
    	</jqxDropDownList>

    Where, again, theme is a string that is set on initialization as “orange” and source is an array of strings set to same dummy data. The source property was removed from this section of code and it suddenly starts picking up theme changes.


    Martin
    Participant

    Hello JohnBucher,

    Yes, you are right! Thank you for your feedback!
    You can workaround this by setting the dropdown list’s theme on the select element change event.
    Here is an Example.

    Best Regards,
    Martin

    jQWidgets Team
    http://www.jqwidgets.com/


    JohnBucher
    Participant

    Thank you very much for your help, that worked!

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

You must be logged in to reply to this topic.