jQWidgets Forums

jQuery UI Widgets Forums Grid Theme color not changing in chrome

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Theme color not changing in chrome #50809

    harry
    Participant

    I am applying theme dynamically to both grid and the menu. It works perfectly in firefox, but theme color is not changing in chrome. I have created a drop down to change theme. Below is my code.

    
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="jqwidgets/styles/jqx.arctic.css" type="text/css" />
        <link rel="stylesheet" href="jqwidgets/styles/jqx.black.css" type="text/css" />
        <link rel="stylesheet" href="jqwidgets/styles/jqx.darkblue.css" type="text/css" />
        <link rel="stylesheet" href="jqwidgets/styles/jqx.energyblue.css" type="text/css" />
        <link rel="stylesheet" href="jqwidgets/styles/jqx.fresh.css" type="text/css" />
        <link rel="stylesheet" href="jqwidgets/styles/jqx.highcontrast.css" type="text/css" />
        <link rel="stylesheet" href="jqwidgets/styles/jqx.metrodark.css" type="text/css" />
        <link rel="stylesheet" href="jqwidgets/styles/jqx.orange.css" type="text/css" />
        <link rel="stylesheet" href="jqwidgets/styles/jqx.shinyblack.css" type="text/css" />
        <link rel="stylesheet" href="jqwidgets/styles/jqx.summmer.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-darkness.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" />
        <link rel="stylesheet" href="jqwidgets/styles/jqx.ui-le-frog.css" type="text/css" />
    
        <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="scripts/demos.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxmenu.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/jqxgrid.edit.js"></script>  
        <script type="text/javascript" src="jqwidgets/jqxcheckbox.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/jqxdata.export.js"></script> 
        <script type="text/javascript" src="jqwidgets/jqxgrid.export.js"></script> 
        <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script> 
        <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    
        <style>
            .column {
                background-color: #034FCD;
                color: white;
                font-weight: bold;
            }
        </style>
       <style>
            .columnx {
                background-color: #FF8000;
                color: white;
                font-weight: bold;
            }
        </style>
    
     <script type="text/javascript">
            $(document).ready(function () {
                var theme = 'ui-darkness';
                var url = "data.txt";
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'QS' },
                        { name: 'QA' },
                        { name: 'HS' },
                        { name: 'MA' },
                        { name: 'Sec. Str. ' }
                    ],
                    id: 'id',
                    url: url
    
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                $("#jqxgrid").jqxGrid(
                {
                    width: 680,
    		height: 480,
                    source: dataAdapter, 
                    sortable: true,
                    enabletooltips: true,
                    showfilterrow: true,
                    filterable: true,
                    editable: true,
                    selectionmode: 'multiplecellsadvanced',
                    Theme: 'ui-lightness',
                    ready: function () {
                        // callback function which is called by jqxGrid when the widget is initialized and the binding is completed.
                    },
                    columnsresize: true,
                    columns: [
                      { text: 'Query Sequence',cellclassname: 'columnx', datafield: 'QS', width: 35 },
                      { text: 'QA', datafield: 'QA', width: 35 },
                      { text: 'HS', datafield: 'HS', width: 35 },
                      { text: 'MA', datafield: 'MA', width: 35 },
                      { text: 'Secondary Str.', datafield: 'Sec. Str.', width: 35 }
                  ]
                });
                var listSource = [{ label: 'Query Sequence', value: 'QS', checked: true },{ label: '1dug' },{ label: 'Query Region', value: 'QA', checked: true }, { label: 'Hit Sequence', value: 'HS', checked: true }, { label: 'Matching Regions', value: 'MA', checked: true }, { label: 'Secondary Str.', value: 'Sec. Str.', checked: true }];
    $("#jqxlistbox").jqxListBox({ source: listSource, width: 150, height: 500,  checkboxes: true });
                $("#jqxlistbox").on('checkChange', function (event) {
                    $("#jqxgrid").jqxGrid('beginupdate');
                    if (event.args.checked) {
                        $("#jqxgrid").jqxGrid('showcolumn', event.args.value);
                    }
                    else {
                        $("#jqxgrid").jqxGrid('hidecolumn', event.args.value);
                    }
                    $("#jqxgrid").jqxGrid('endupdate');
                });
                    $(document).ready(function () {
                    var theme = getDemoTheme();
                    // Create jqxButton widgets.
                    
                 
                    // Subscribe to Click events.
                    $("#Theme1").on('click', function () {
                        $('#jqxgrid').jqxGrid({ theme: theme });
                        $('#jqxMenu').jqxMenu({ theme: theme });
                    });
                    $("#Theme2").on('click', function () {
                        $('#jqxgrid').jqxGrid({ theme: 'arctic' });
                        $('#jqxMenu').jqxMenu({ theme: 'arctic' });
                    });
                    $("#Theme3").on('click', function () {
                        $('#jqxgrid').jqxGrid({ theme: 'black' });
                        $('#jqxMenu').jqxMenu({ theme: 'black' });
                    });
                    $("#Theme4").on('click', function () {
                        $('#jqxgrid').jqxGrid({ theme: 'darkblue' });
                        $('#jqxMenu').jqxMenu({ theme: 'darkblue' });
                    });
                    $("#Theme5").on('click', function () {
                        $('#jqxgrid').jqxGrid({ theme: 'energyblue' });
                        $('#jqxMenu').jqxMenu({ theme: 'energyblue' });
                    });
                    $("#Theme6").on('click', function () {
                        $('#jqxgrid').jqxGrid({ theme: 'fresh' });
                        $('#jqxMenu').jqxMenu({ theme: 'fresh' });
                    });
                    $("#Theme7").on('click', function () {
                        $('#jqxgrid').jqxGrid({ theme: 'highcontrast' });
                        $('#jqxMenu').jqxMenu({ theme: 'highcontrast' });
                    });
    		$("#Theme8").on('click', function () {
                        $('#jqxgrid').jqxGrid({ theme: 'ui-lightness' });
                        $('#jqxMenu').jqxMenu({ theme: 'ui-lightness' });
                    });
    		$("#Theme9").on('click', function () {
                        $('#jqxgrid').jqxGrid({ theme: 'ui-darkness' });
                        $('#jqxMenu').jqxMenu({ theme: 'ui-darkness' });
                    });
    		$("#Theme10").on('click', function () {
                        $('#jqxgrid').jqxGrid({ theme: 'ui-redmond' });
                        $('#jqxMenu').jqxMenu({ theme: 'ui-redmond' });
                    });
    		$("#Theme11").on('click', function () {
                        $('#jqxgrid').jqxGrid({ theme: 'ui-sunny' });
                        $('#jqxMenu').jqxMenu({ theme: 'ui-sunny' });
                    });
    		$("#Theme12").on('click', function () {
                        $('#jqxgrid').jqxGrid({ theme: 'ui-le-frog' });
                        $('#jqxMenu').jqxMenu({ theme: 'ui-le-frog' });
                    });
               });
                $("#excelExport").jqxButton({ theme: theme });
                $("#xmlExport").jqxButton({ theme: theme });
                $("#csvExport").jqxButton({ theme: theme });
                $("#tsvExport").jqxButton({ theme: theme });
                $("#htmlExport").jqxButton({ theme: theme });
    	    $("#excelExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');           
                });
                $("#xmlExport").click(function () {
                    $("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid');
                });
                $("#csvExport").click(function () {
                    $("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid');
                });
                $("#tsvExport").click(function () {
                    $("#jqxgrid").jqxGrid('exportdata', 'tsv', 'jqxGrid');
                });
                $("#htmlExport").click(function () {
                    $("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid');
                }); 
           });
          </script>
    </head>
    <body>
        <div id='content'>
    	<div class="logo"><img src="img/starblast.jpg" width="1100" alt="img" /></div>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#jqxMenu").jqxMenu({
    		 width: '1100px', height: '30px',
                     Theme: 'ui-lightness',
    		});
                
               
                });
            </script>
               <div id='jqxMenu'>
                </div>
        </div>
     <div id='jqxWidget'>
            <div>
    	<select>
    
       	 <option value="Theme1"  id='Theme1'>Choose Theme</option>
    	 <option value="Theme2"  id='Theme2'>Arctic</option>
    	 <option value="Theme3"  id='Theme3'>Black</option>
    	 <option value="Theme4" id='Theme4'>DarkBlue</option>
    	 <option value="Theme5" id='Theme5'>EnergyBlue</option>
    	 <option value="Theme6" id='Theme6'>Fresh</option>
    	 <option value="Theme7" id='Theme7'>HighContrast</option>
    	 <option value="Theme8" id='Theme8'>Lightness</option>
    	 <option value="Theme9" id='Theme9'>Darkness</option>
    	 <option value="Theme10" id='Theme10'>Redmond</option>
    	 <option value="Theme11" id='Theme11'>Sunny</option>
    	 <option value="Theme12" id='Theme12'>Le frog</option>
    	</select> 
                    <input type="button" value="Export to Excel" id='excelExport' />
    		<input type="button" value="Export to XML" id='xmlExport' />
                    <input type="button" value="Export to CSV" id='csvExport' />
                    <input type="button" value="Export to TSV" id='tsvExport' />
                    <input type="button" value="Export to HTML" id='htmlExport' />
            </div>
                   <br />
            <div style="float: left;" id="jqxlistbox"></div>
            <div style="margin-left: 20px; float: left;" id="jqxgrid"></div>
    
        </div>
    Theme color not changing in chrome #50811

    Dimitar
    Participant

    Hello harry,

    You should subscribe to the selects elements’s change event and change the theme properties of the widgets in its callback. Please check out the following Stack Overflow topic: http://stackoverflow.com/questions/15971698/select-option-onclick-function-works-in-ff-but-not-in-chrome.

    However, we recommend you to use the jqxDropDownList instead (it has a nice load from select functionality).

    Best Regards,
    Dimitar

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

    Theme color not changing in chrome #50832

    harry
    Participant

    Thankx for the quick reply. The change function works.
    First i need to give a id to drop down
    <select id=”sortby2″>
    and change the theme selection function.
    $(“#sortby2”).change(function(){
    if($(this).find(‘option:selected’)[0].id != ‘Theme12’)
    return;
    $(‘#jqxgrid’).jqxGrid({ theme: ‘ui-le-frog’ });
    $(‘#jqxMenu’).jqxMenu({ theme: ‘ui-le-frog’ });
    });
    The dropdownlist lookes better, i’ll look into it also.

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

You must be logged in to reply to this topic.