jqxGrid in WordPress > new $.jqx.dataAdapter

[hfParticipant]

I would like to use the jqxGrid in WordPress. I have read the tutorial and the calendar worked well.

But when I had added the grid, the following error appears:
Uncaught TypeError: Cannot read property ‘jqx’ of undefined

This is how code looks like.

initializewidgets.js:

function initializeWidgets() {
    theme = 'orange';
	jQuery("#widgetsContainer").html('<div id="jqxCalendar"></div><br /><div id="jqxButton">Change the date</div>');
    jQuery("#jqxCalendar").jqxCalendar({ theme: theme, width: 220, height: 220 });
    jQuery("#jqxButton").jqxButton({ theme: theme, width: 150 });
    jQuery("#jqxButton").click(function () {
        jQuery('#jqxCalendar').jqxCalendar('setDate', new Date(2013, 11, 31));
    });
	
	var url = "../sampledata/products.xml";
	// prepare the data
	var source =
	{
		datatype: "xml",
		datafields: [
			{ name: 'ProductName', type: 'string' },
			{ name: 'QuantityPerUnit', type: 'int' },
			{ name: 'UnitPrice', type: 'float' },
			{ name: 'UnitsInStock', type: 'float' },
			{ name: 'Discontinued', type: 'bool' }
		],
		root: "Products",
		record: "Product",
		id: 'ProductID',
		url: url
	};
	var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
		if (value < 20) {
			return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
		}
		else {
			return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
		}
	}
	//var dataAdapter = null;
	var dataAdapter = new $.jqx.dataAdapter(source, {
		downloadcomplete: function (data, status, xhr) { },
		loadcomplete: function (data) { },
		loaderror: function (xhr, status, error) { }
	});
	
	// initialize jqxGrid
	jQuery('#jqxgrid').jqxGrid(
	{
		theme: theme,
		width: 850,
		source: dataAdapter,                
		pageable: true,
		autoheight: true,
		sortable: true,
		altrows: true,
		enabletooltips: true,
		editable: true,
		selectionmode: 'multiplecellsadvanced',
		columns: [
		  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
		  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
		  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
		  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
		  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
		],
		columngroups: [
			{ text: 'Product Details', align: 'center', name: 'ProductDetails' }
		]
	});
}

This code I added to Twenty Sixteen (functions.php) on WordPress:

// adds jQWidgets scripts
function add_jqwidgets() {
	// registers jQWidgets JavaScript files
	//wp_register_script( 'jqx-all', get_template_directory_uri() . '/js/jqx-all.js', array( 'jquery' ), '3.0.4', false );
	wp_register_script( 'jqxcore', get_template_directory_uri() . '/js/jqxcore.js', array( 'jquery' ), '3.0.4', false );
	wp_register_script( 'jqxdatetimeinput', get_template_directory_uri() . '/js/jqxdatetimeinput.js', array( 'jquery' ), '3.0.4', false );
	wp_register_script( 'jqxcalendar', get_template_directory_uri() . '/js/jqxcalendar.js', array( 'jquery' ), '3.0.4', false );
	wp_register_script( 'jqxtooltip', get_template_directory_uri() . '/js/jqxtooltip.js', array( 'jquery' ), '3.0.4', false );	
	wp_register_script( 'jqxdata', get_template_directory_uri() . '/js/jqxdata.js', array( 'jquery' ), '3.0.4', false ); 
	wp_register_script( 'jqxbuttons', get_template_directory_uri() . '/js/jqxbuttons.js', array( 'jquery' ), '3.0.4', false );
	wp_register_script( 'jqxscrollbar', get_template_directory_uri() . '/js/jqxscrollbar.js', array( 'jquery' ), '3.0.4', false );
	wp_register_script( 'jqxmenu', get_template_directory_uri() . '/js/jqxmenu.js', array( 'jquery' ), '3.0.4', false );
	wp_register_script( 'jqxcheckbox', get_template_directory_uri() . '/js/jqxcheckbox.js', array( 'jquery' ), '3.0.4', false );
	wp_register_script( 'jqxlistbox', get_template_directory_uri() . '/js/jqxlistbox.js', array( 'jquery' ), '3.0.4', false );
	wp_register_script( 'jqxdropdownlist', get_template_directory_uri() . '/js/jqxdropdownlist.js', array( 'jquery' ), '3.0.4', false );
	wp_register_script( 'jqxgrid', get_template_directory_uri() . '/js/jqxgrid.js', array( 'jquery' ), '3.0.4', false );
	wp_register_script( 'jqxgrid.sort', get_template_directory_uri() . '/js/jqxgrid.sort.js', array( 'jquery' ), '3.0.4', false ); 
	wp_register_script( 'jqxgrid.pager', get_template_directory_uri() . '/js/jqxgrid.pager.js', array( 'jquery' ), '3.0.4', false ); 
	wp_register_script( 'jqxgrid.selection', get_template_directory_uri() . '/js/jqxgrid.selection.js', array( 'jquery' ), '3.0.4', false ); 
	wp_register_script( 'jqxgrid.edit', get_template_directory_uri() . '/js/jqxgrid.edit.js', array( 'jquery' ), '3.0.4', false ); 
	wp_register_script( 'globalize', get_template_directory_uri() . '/js/globalize.js', array( 'jquery' ), '3.0.4', false );
	wp_register_script( 'globalize-NL', get_template_directory_uri() . '/js/globalize.culture.nl-NL.js', array( 'jquery' ), '3.0.4', false );

	// register custom script
	wp_register_script( 'initializewidgets', get_template_directory_uri() . '/js/initializewidgets.js', array( 'jquery' ), '1.0.0', false );
	// register jQWidgets CSS files
	wp_register_style( 'jqx.base', get_template_directory_uri() . '/css/jqx.base.css', array(), '3.0.4', 'all' );
	wp_register_style( 'jqx.orange', get_template_directory_uri() . '/css/jqx.orange.css', array(), '3.0.4', 'all' );
	if (is_page(11)==true || is_page(4)==true){
		// enqueue jQWidgets JavaScript files
		//wp_enqueue_script( 'jqx-all' );
		wp_enqueue_script('jqxcore' );
		wp_enqueue_script('jqxdatetimeinput' );
		wp_enqueue_script('jqxcalendar' );
		wp_enqueue_script('jqxtooltip' );
		wp_enqueue_script('jqxdata' );
		wp_enqueue_script('jqxbuttons' );
		wp_enqueue_script('jqxscrollbar' );
		wp_enqueue_script('jqxmenu' );
		wp_enqueue_script('jqxcheckbox' );
		wp_enqueue_script('jqxlistbox' );
		wp_enqueue_script('jqxdropdownlist' );
		wp_enqueue_script('jqxgrid' );
		wp_enqueue_script('jqxgrid.sort' );
		wp_enqueue_script('jqxgrid.pager' );
		wp_enqueue_script('jqxgrid.selection' );
		wp_enqueue_script('jqxgrid.edit' );
		wp_enqueue_script('globalize' );
		wp_enqueue_script('globalize-NL' );

		// enqueue custom script
		wp_enqueue_script( 'initializewidgets' );

		// enqueue jQWidgets CSS files
		wp_enqueue_style( 'jqx.base' );
		wp_enqueue_style( 'jqx.orange' );
	};
}
add_action( 'wp', 'add_jqwidgets' );

I guess I need to change something in this line: var dataAdapter = new $.jqx.dataAdapter(source, {…

[DimitarParticipant]

Hello hf,

As with everywhere else in your code, please use jQuery instead of $, i.e.:

var dataAdapter = new jQuery.jqx.dataAdapter(source, {
    downloadcomplete: function(data, status, xhr) {},
    loadcomplete: function(data) {},
    loaderror: function(xhr, status, error) {}
});

Best Regards,
Dimitar

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

[Author]

Posts