jQuery UI Widgets Forums Grid jqxGrid in WordPress > new $.jqx.dataAdapter

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • hf
    Participant

    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, {


    Dimitar
    Participant

    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/

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

You must be logged in to reply to this topic.