Reusing theme combobox

[alhopiteauMember]

Deals with problems encountered when trying to reuse the theme combobox of the demo section of the jqwidgets.com website

[alhopiteauMember]

Hi I am trying to reuse the themeComboBox but when it tries to init the widget in the initthemes function I get an error because the listbox member is undefined.

I use the 1.4 of jqwidgets.

here is a chunk of the code I use:

HTML code:

Theme:

javascript code:

GetTheme.js:
function initthemes(initialurl) {
var loadedThemes = [0, -1, -1, -1, -1];
var themes = [‘Classic’, ‘Energy Blue’, ‘Shiny Black’, ‘Dark Blue’, ‘Summer’];
var me = this;
this.$head = $(‘head’);
//next line is the one which cause the exception in the jqxdropdownlist.js file
$(‘#themeComboBox’).jqxDropDownList({ source: themes, theme: ‘classic’, selectedIndex: 0,
dropDownHeight: 122, width: ‘120px’, height: ’20px’ });
….

$(document).ready(function () {

var initialurl = “jqwidgets/styles/jqx.”;
initthemes(initialurl);
….

Cheers!

[Peter StoevKeymaster]

Hi alhopiteau,

The gettheme.js is a utility function that we use in our demos to load the correct files. It is implemented only for the Examples project purpose.

To set a theme to a dropdownlist, please take a look at this help article: jquery-dropdownlist-styling-and-appearance.htm

The article shows which files you need to include in your project and how to set the theme property.

In addition, the DropDownList widgets internally uses the ListBox widget and you need to include the jqxlistbox.js in your page, too. If you don’t include it, an exception will be raised.

The following code example shows the list of files that you need to reference in your page to use the jqxDropDownList.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/>
<script type="text/javascript" src="../../scripts/jquery-1.6.2.min.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[alhopiteauMember]

Thanks a lot for your help Peter (on the bridge during week ends, so nice of you) , looks like I was missing the jqxscrollbar module in my attempt to make this code running. I will have a look to this article of yours tonight in order to improve this theming feature.

Cheers.

[zandroParticipant]

Hi, Can I ask if how can I also use the theme switcher function using a dropdown or combobox? example i have a dropdown list that contains the list of all themes then if I on the onselect function of the combobox the whole theme of all the widgets irregardless of the number of widgets, they will change accordingly based on the selected theme on the combo box.

Thanks in advance.

Zandro

[Peter StoevKeymaster]

Hi Zandro,

You have to dynamically set the “theme” property of a widget(s) and make sure that the theme’s CSS file is present.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts