jQWidgets Forums

Tagged: theme roller

This topic contains 13 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 4 months ago.

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

Author

jqxButton theme Posts
January 14, 2015 at 9:04 pm jqxButton theme #65383
Tony Russo
Participant
Hi Folks,

Seem to be having a problem with the jqxButton theme Property where it only works once.

By class works for all except jqxButton
```
$(".jqx_grid_theme" ).jqxGrid({ theme: theme });
$(".jqx_dropdown_theme").jqxDropDownList({ theme: theme });
$(".jqx_menu_theme").jqxMenu({ theme: theme });

$(".jqx_button_theme").jqxButton({ theme: theme }); //this works only once

//or looping by class does not work for jqxButton
$(".jqx_button_theme" ).each( function ( index ) {
    $( '#' + this.id ).jqxButton({ theme: theme });
});
```
By ID works for all first time every time, (including jqxButton).
```
$("#jqxgrid" ).jqxGrid({ theme: theme });
$("#jqxDropDownList").jqxGrid({ theme: theme });
$("#jqxMenu").jqxMenu({ theme: theme });
$("#jqxButton").jqxButton({ theme: theme });
```
January 14, 2015 at 11:32 pm jqxButton theme #65391
Tony Russo
Participant
Hi,

You can replicate the problem using the code below.

Clicking on the DropDown changes the theme on everything but the button using class selector.

Clicking on the Button anytime after clicking on the DownDown will set the button theme using ID selector.
```
<!DOCTYPE html>
<html lang="en">
<head>

    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.black.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-le-frog.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-lightness.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-redmond.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />

    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            //default theme
            var theme = 'ui-le-frog'; //default theme

            // prepare the data for grid
            var url = "test_data.php";
            var data = new Array();
            var firstNames = [ "Andrew", "Nancy", "Shelley", "Regina", "Yoshi" ];
            var lastNames = [ "Fuller", "Davolio", "Burke", "Murphy", "Nagase" ];
            var productNames = [ "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte" ];
            var priceValues = [ "2.25", "1.5", "3.0", "3.3", "4.5" ];
            for (var i = 0; i < 5; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["quantity"] = quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                theme: theme,
                width: 520,
                height: 170,
                source: dataAdapter,
                columnsresize: true,
                columns: [
                  { text: 'Name', datafield: 'firstname', width: 120 },
                  { text: 'Last Name', datafield: 'lastname', width: 120 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }
                ]
            });

            // Create a jqxMenu
            $("#jqxMenu").jqxMenu({ theme: theme, width: '650', height: '30px', autoOpen: false,
                                    autoCloseOnMouseLeave: false, showTopLevelArrows: true});

            //Create a jqxDropDownList with theme roller options
            var theme_source = [ "black", "energyblue", "ui-le-frog", "ui-lightness","ui-redmond", "ui-sunny" ];
            $("#jqxDropDownList").jqxDropDownList({ source: theme_source, theme: theme, selectedIndex: 0, width: '200px', height: '25px'});

            //Create a jqxButton
            $("#jqxButton").jqxButton({ width: '150', theme: theme,});

            //Create OnClick for DropDown
            $('#jqxDropDownList').on('select', function (event) {
                var args = event.args;
                var item = $('#jqxDropDownList').jqxDropDownList('getItem', args.index);
                theme = item.label;
                if (theme != null) {
                    $("#jqxButton").prop('value', theme ); //versions newer than 1.6

                    $(".jqx_grid_theme" ).jqxGrid({ theme: theme });
                    $(".jqx_dropdown_theme").jqxDropDownList({ theme: theme });
                    $(".jqx_menu_theme").jqxMenu({ theme: theme });
                    $(".jqx_button_theme").jqxButton({ theme: theme }); //this works once
                }
            });

            //Create OnClick for Button
            $("#jqxButton").on('click', function () {
                    $("#jqxgrid" ).jqxGrid({ theme: theme });
                    $("#jqxDropDownList").jqxDropDownList({ theme: theme });
                    $("#jqxButton").jqxButton({ theme: theme });    //this works always
                    $("#jqxMenu").jqxMenu({ theme: theme });

            });

            $("#jqxDropDownList").jqxDropDownList("selectItem", theme);  //set default theme

        });
    </script>
</head>
<body class='default'>

  <div style="margin-left: 20px;" >

    <div id='jqxMenu'  class="jqx_menu_theme">
      <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Purchase</li>
        <li>Services</li>
        <li>About Us</ul>
      </ul>
    </div>
    <br />
 
    <div style='vertical-align: middle; display: inline-block;' id='jqxDropDownList' class="jqx_dropdown_theme"></div>
    set themes using class<br /><br />

    <input type="button" value="Button" id='jqxButton' class="jqx_button_theme" /> set themes using IDs<br />

    <br />
    <div id="jqxgrid" class="jqx_grid_theme"  ></div>

  </div>

</body>
</html>
```
January 15, 2015 at 7:31 am jqxButton theme #65412

Peter Stoev
Keymaster

Hi Tony Russo,

We don’t find a problem with the button’s theme using jQWidgets 3.6. Sample: http://jsfiddle.net/Lrfztd2h/. The issue with your code is actually with the Class selector. Custom Classes are removed when the Theme is applied.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 15, 2015 at 1:53 pm jqxButton theme #65433
Tony Russo
Participant
We are not off to a good start here!

How did you try to replicate the problem?

Did you actually run our code?

We are using JQWidgets 3.6.0

Running our code we see the problem in various different browsers on OS X and Windows version.

The code snippet below from the full code above is the on click function when a theme is selected from the DropDownList. When the on Click event fires “Custom Classes” are in FACT used and working for DropDownList, Grid, and Menu, just not for Buttons.

Because the Click event updates the GLOBAL variable “theme” we can then use the Button on Click to show using the ID which in FACT does change the button them.

In conclusion, our test code above shows “Custom Classes” working for everything other than buttons.
```
            //Create OnClick for DropDown
            $('#jqxDropDownList').on('select', function (event) {
                var args = event.args;
                var item = $('#jqxDropDownList').jqxDropDownList('getItem', args.index);
                theme = item.label;
                if (theme != null) {
                    $("#jqxButton").prop('value', theme ); 

                    $(".jqx_grid_theme" ).jqxGrid({ theme: theme }); //this ALWAYS works
                    $(".jqx_dropdown_theme").jqxDropDownList({ theme: theme }); //this ALWAYS works
                    $(".jqx_menu_theme").jqxMenu({ theme: theme }); //this ALWAYS works
                    $(".jqx_button_theme").jqxButton({ theme: theme }); //this NEVER works
                }
            });
```
January 15, 2015 at 2:27 pm jqxButton theme #65436

Peter Stoev
Keymaster

Hi Tony Russo,

I wrote you what is the problem. Please re-read my previous post carefully and especially the part with the Class Selector.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 15, 2015 at 3:10 pm jqxButton theme #65440

Tony Russo
Participant

Looking through the DOM all the “Custom Classes” are intact except for buttons.

See JQWidgets classes for
jqx-grid (grid)
jqx-menu (menu)
jqx-button (button)
nothing equivalent for DropDownList

The following works for Grid, Menu and Button

$(“.jqx-grid”).jqxGrid({ theme: theme });
$(“.jqx-menu”).jqxMenu({ theme: theme });
$(“.jqx-button”).jqxButton({ theme: theme });

Don’t see an equivalent class for DrownDown, of the classes below, the first jq_dropdown_theme is our “Custom Class”, the rest are from jqwidgets, is there one from the list we could use like the other widgets?

jqx_dropdown_theme jqx-widget jqx-widget-ui-le-frog jqx-dropdownlist-state-normal jqx-dropdownlist-state-normal-ui-le-frog jqx-rc-all jqx-rc-all-ui-le-frog jqx-fill-state-normal jqx-fill-state-normal-ui-le-frog

Also i noticed all the widgets seem to have a class of “jqx-widget”.

Would something like this work, does each method have the ability to filter for it’s element?”

$(“.jqx-widget” ).jqxGrid({ theme: theme });
$(“.jqx-widget”).jqxMenu({ theme: theme });
$(“.jqx-widget”).jqxButton({ theme: theme });
$(“.jqx-widget”).jqxDropDownList({ theme: theme });

January 15, 2015 at 3:22 pm jqxButton theme #65442

Tony Russo
Participant

I read your post several times.

My understanding is you did not use our code to replicate the probem.

You used your code which uses ID’s not classes which has nothing to do with our reported issue. Our issue is with classes not ID’s. We actual point ID works where classes do not. You seemed to use the wrong code to replicate our reported problem.

Then you say “Custom Classes” are removed. Not knowing what context your referring to, buttons, grid, menu or dropdown. Because our code uses all 4 of them took your comment to apply to all the widgets in our code.

January 15, 2015 at 3:28 pm jqxButton theme #65443

Tony Russo
Participant

Peter,

Are you saying removing “Custom Classes” is a bug and you will take action on correcting it?

Or are you making a statement you remove “Custom Classes” by design?

I hope this is a bug!

January 15, 2015 at 3:47 pm jqxButton theme #65445

Peter Stoev
Keymaster

Hi Tony Russo,

I would advice you to be more polite when you write in our Forum. I have read your posts and I pretty much understand what your code does. I also wrote you how you can solve your issue. Ok, no problem. Here is another sample which uses CSS Class for jQuery Selection: http://jsfiddle.net/1q2r0pks/. You can use that approach, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 16, 2015 at 9:15 pm jqxButton theme #65534

Tony Russo
Participant

Peter,

Sorry, I am not trying to be impolite, as i said we are getting off to a bad start.

We’re in the process of evaluating your plugin while comparing features with other to make an informed decision to purchase and we are very short on time line.

Once again, not trying to be impolite, just trying to get an understanding of the underlying methods of your plugin as it differs from the others. A vital decision on our part is how we can make changes to existing methods, events and styles etc.

As we evaluate your plugin we’re asking ourselves, in addition to all your great features are we able to add/extend features before asking for feature requests. We have much different time lines and they are not likely to coincide, although that would be most welcome when it does occur!

So we’re looking into implementing features like “Theme Roller/Skinning settings for all elements with one on click event”, “Saved Searches” in our custom form, moving Search fields to our custom form, moving paging element to our custom form, adding additional events to existing events (.bind or .on) . JQuery makes this all so easy using .clone, .before, .after, .bind, .on etc…

However we have run into issue evaluating other great plugin similar to yours where the relevant elements are simply not in DOM because they are most likely dynamically added/removed with an on click event. Making our efforts to move or delete, change these elements, or add classes, or adding events it difficult to impossible.

When I ask about about stripping “Custom Classes” is a design or bug. My humor of saying I hope it’s a bug meant, a bug is typically fixed sooner than later, by design meant it may never be changed or if it is on a much longer time line.

One of our questions is asked is using the “jqx-widget” class, seems to be on all widgets, so we wondered if these methods could distinguish on the element type so we could use theme something like

$(“.jqx-widget” ).jqxGrid({ theme: theme });
$(“.jqx-widget”).jqxMenu({ theme: theme });
$(“.jqx-widget”).jqxButton({ theme: theme });
$(“.jqx-widget”).jqxDropDownList({ theme: theme });

Getting back to your example. I see a slight difference in what I think is coding style, and clearly my style is not working. So I wish to understand why.

Your working code (you clearly shows the “Custom Class” not striped, so why?

var button = $(‘.myButton’);
button.jqxButton({ theme: ‘energyblue’ });

What I’m asking myself, and could use your help if your willing to explain. Your example works and our does not. In your example clearly the “Custom Class” is not striped in the fiddle example. However when we look in dom of our code the “Custom Class” only for the button is stripped which is why it’s not working. Also i see a slight difference in what I think is style of your code and ours.

our code using global variable to hold the theme namne, and JQuery select chained to jqxButton method.

var theme = ‘energblue’;
$(‘.myButton’).jqxButton({ theme: theme });

Once again, not trying to be impolite, and thank you for your assistance.

Best Regards,
Tony Russo

January 20, 2015 at 12:44 am jqxButton theme #65637

Tony Russo
Participant

No Response in 3 days, now who’s not being polite.

January 20, 2015 at 7:01 am jqxButton theme #65651

Peter Stoev
Keymaster

Hi Tony Russo,

There is nothing I can add here. I sent you 2 working demos. In addition, this is community, not support forum.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 20, 2015 at 5:55 pm jqxButton theme #65707

Tony Russo
Participant

Hi Peter,

Thank you for your assistance.

Given your recent responses, and after careful consideration we have decided to not purchase your Enterprise License + Platinum Support + Source Code.

Our decision is mainly based on your technical responses in this forum.

Best Regards.
Tony RUsso

January 21, 2015 at 7:16 am jqxButton theme #65720

Peter Stoev
Keymaster

Hi Tony Russo,

Thank you for the response. This is a Community Forum and answers should be expected by Forum peers only. We are watching the Forum and respond to questions from time to time to move it on. The support which we provide however is by e-mail only.

Best Regards,
Peter Stoev

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

Posts

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

You must be logged in to reply to this topic.