[Tony RussoParticipant]

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

[Tony RussoParticipant]

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

[Tony RussoParticipant]

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

[Tony RussoParticipant]

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!

[Tony RussoParticipant]

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.

[Tony RussoParticipant]

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 });

[Tony RussoParticipant]

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
                }
            });

[Tony RussoParticipant]

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>

[Author]

Posts