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.
-
Author
-
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>
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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. -
AuthorPosts
You must be logged in to reply to this topic.