This topic contains 9 replies, has 2 voices, and was last updated by  jperera 9 years, 1 month ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    theme topic Posts
  • theme topic #69592

    jperera
    Participant

    Hello Everybody,

    I have this situation, i want to put the option for the customer can change the theme dinamically, i know the restriction that only in the initialization of the widgets you could assign the theme, but this is not a problem, my problem is other, i have those references on my page:

    <link type="text/css" rel="stylesheet" href="~/Content/Site.css" />
        <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.bootstrap.css" />
        <script type="text/javascript" src="~/Scripts/JQWidgets/jqxcore.js"></script>
        <script type="text/javascript" src="~/Scripts/JQWidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="~/Scripts/JQWidgets/jqxdata.js"></script>
        <script type="text/javascript" src="~/Scripts/JQWidgets/jqxdata.export.js"></script>
        <script type="text/javascript" src="~/Scripts/JQWidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="~/Scripts/JQWidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="~/Scripts/JQWidgets/jqxdatatable.js"></script>
        <script type="text/javascript" src="~/Scripts/JQWidgets/jqxtabs.js"></script>
        <script type="text/javascript" src="~/Scripts/JQWidgets/jqxprogressbar.js"></script>

    If i want to change the theme i have to include the other ones css for the others themes, that’s correct???
    When i put this line for include the other theme: <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.artic.css" />, in the application automatically everything change the theme for the default theme and don’t considered the property Theme on the widgets: In the widgets i have the property in that way:

     $("#tbDuressCreateCode").jqxInput({ placeHolder: "Enter Code...", theme: 'bootstrap' });
      $("#tbDuressCreateComent").jqxInput({ placeHolder: "Enter Comment...", theme: 'bootstrap' });

    Please any help with this issue,

    Thank you very much
    Jose

    theme topic #69598

    jperera
    Participant

    Thank you very much i solved the problem i was include the base script, I’m sorry…

    Jose

    theme topic #69641

    jperera
    Participant

    Hello,
    I having so trouble with the themes that’s why i’m writing in the same post, i did the changed theme dinamically and it works very fine so far, the only issue that i have is with the combobox and the jqxDateTime, in those case when i put a theme like bootstrap for example all the values (the texts) are in color white then you can’t see the text but the value is in and it is correct…
    I check the theme and it’s assigned a correct theme value…
    Any idea of what could be happened!!!.
    Thanks
    Jose

    theme topic #69644

    Nadezhda
    Participant

    Hello Jose,

    Please, provide us with a JSFiddle example which demonstrates the behavior which you observe so we can see what’s wrong in that code.

    Best Regards,
    Nadezhda

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

    theme topic #69645

    jperera
    Participant

    Look I don’t have an account in JSFiddle but i will give you here a fragment of my code, i hope it’s look good.
    I have include all the css of the themes:

     <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.bootstrap.css" />
        <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.arctic.css" />
        <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.black.css" />
        <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.classic.css" />
        <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.darkblue.css" />

    This is the code html for the one of the component with the problem:

    <div id="popupWindowThemeConfiguring">
        <div>
            <span>
                <img src="~/Content/Images/imChangeTheme.png" alt="" style="margin-right: 15px" /><b>MySecurity Account</b>- Change Theme...
            </span>
        </div>
        <div style="overflow: hidden;">
            <table>
                <tr>
                    <td><div id="jqxTheme"></div></td>
                    <td><input type="submit" value="Change" class="btn-primary" onclick="RedirectHome()" /></td>
                </tr>
            </table>
        </div>
    </div>

    As you could see this is html for a widget window and a combo that show a local array and a button…
    The follow code is for the initialization of the widgets:

     $("#popupWindowThemeConfiguring").jqxWindow({ showCollapseButton: false, isModal: true, animationType: 'fade', resizable: false, showCloseButton: true, width: "320px", height: "100px" });
    function ShowThemeWindow() {
                var themeVal = $.cookie("MSATheme");
                if (themeVal != '' && themeVal != null)
                    themeVal = themeVal;
                else
                    themeVal = "bootstrap";
                var source = [
                            "android",
                            "artic",
                            "black",
                            "bootstrap",
                            "classic",
                            "darkblue",
                            "energyblue",
                            "fresh",
                            "highcontrast",
                            "metro",
                            "metrodark",
                            "office",
                            "orange",
                            "shinyblack",
                            "summer"
    
                ];
                $("#jqxTheme").jqxComboBox({ source: source, width: '200', height: '20', placeHolder: "Change the Website Theme...", });
                $("#popupWindowThemeConfiguring").jqxWindow('open');
            }

    If you check you will see that i don’t have a property theme on the combobox and i don’t know why when the window show the combo show me the placeHolder text correct and the list is correct and when you select on item in the list it selected but put the text on white.
    At the last this the code that I’m using to change the theme for all the components:
    the follow code is the function that i’m calling when you select a theme in the combo and press the button CHANGE, i’m refreshing all the pages.

     function RedirectHome() {
                $.cookie("MSATheme", $("#jqxTheme").jqxComboBox('val'));
                window.location.href = '@Url.Action("Index", "WorkPanel")';
            }

    And this the code that i’m using to assign the them in the initialization:

    var themeVal = $.cookie("MSATheme");
                if (themeVal != '' && themeVal != null)
                    themeVal = themeVal;
                else
                    themeVal = "bootstrap";

    One last consideration, I believe that the problem is with the jqxwindow because the components only have the issue when i’m showing it in the jqxwindow.

    Thank you very much…

    Jose

    theme topic #69648

    jperera
    Participant

    Hello, the issue that i was talking previously it seem to be some bug on Firefox because a test the application in IE v11 and it works fine…
    Please if you find any solution please advice me so i could fix it..

    Thank you

    theme topic #69657

    Nadezhda
    Participant

    Hi Jose,

    You have no need an account in JSFiddle to make an example.
    If you want to add theme to jQWidgets you should set the ‘theme’ property. For more information, please, refer to the API Documentation.

    Best Regards,
    Nadezhda

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

    theme topic #69679

    jperera
    Participant

    Please, don’t give me a documentation again,
    I have read it a lot of time and I wrote that the theme change works fine, this is not the problem, the problem is that in FireFox have a bug that the components jqxDateTimeInput and jqxComboBox show the text in white into a jqxwindow, no matter the theme that you have on the initialization of the control….
    Thanks…
    Jose

    theme topic #69704

    Nadezhda
    Participant

    Hi Jose,

    We tested Default Functionality demos of jqxDateTimeInput and jqxComboBox in the latest version of Firefox (37.0.1) and everything works as expected. If you initialize jqxDateTimeInput and jqxComboBox in jqxWindow, please find the following examples:
    -jqxComboBox in jqxWindow: http://jsfiddle.net/xqcsr4mj/.
    -jqxDateTimeInput in jqxWindow: http://jsfiddle.net/rj4qe5h7/.

    If this doesn’t help you fix your issue, please, provide us with a full sample or JSFiddle example which demonstrates your scenario, then we will be able to test with your code.

    Best Regards,
    Nadezhda

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

    theme topic #69706

    jperera
    Participant

    thank you very much Nadezhda, it will be very helpful those examples…

    Jose

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

You must be logged in to reply to this topic.