jQWidgets Forums

This topic contains 7 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 5 months ago.

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

Author

Installation Posts

October 22, 2014 at 9:10 am Installation #61486

Participant

I have configured a simple jqxGrid as per the example copied from in the demos.
All the problems reported below relate to the copied version.

But while configuring I was not able to find ‘jquery.js’ file in the package which is used for import.
I have downloaded version – 3.5.0

Because of this I was getting following error:

‘$ is undefined’.

I bypassed the problem by using jquery.js version 1.10.2.
Now the issue I am facing is in dataAdapter initialization. I am getting following error.

‘JavaScript runtime error: Unable to get property ‘dataAdapter’ of undefined or null reference’

October 22, 2014 at 9:14 am Installation #61487

Peter Stoev

Keymaster

Hi jkapasi,

1. jquery.js – jQuery Framework 1.7+ version. All examples in the download package use a version of jQuery. In the current build, this is 1.11.1. You can see these demos in the demos folder.
2. If you get such error, most probably you did not create correctly dataAdapter as shown in the demos or you’re missing a correct reference to jqxdata.js.

Regards,
Peter Stoev

October 22, 2014 at 9:48 am Installation #61488

jkapasi

Participant

Thank you for your response.

But where can I find ‘jquery.js’ file?

Following is the code which gives me the error in the dataAdapter initialization:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title id='Description'>Grid populated from JSON.</title>
        <link rel="stylesheet" href="js/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="js/jqwidgets/scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="js/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="js/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="js/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="js/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="js/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="js/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="js/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="js/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="js/jqwidgets/jqxgrid.selection.js"></script> 
        <script type="text/javascript" src="js/jqwidgets/jqxgrid.columnsresize.js"></script> 
        <script type="text/javascript" src="js/jqwidgets/jqxgrid.filter.js"></script> 
        <script type="text/javascript" src="js/jqwidgets/jqxgrid.sort.js"></script> 
        <script type="text/javascript" src="js/jqwidgets/jqxgrid.pager.js"></script> 
        <script type="text/javascript" src="js/jqwidgets/jqxgrid.grouping.js"></script> 
        <script type="text/javascript" language="javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
var data = new Array();
var firstNames =
[
    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (var i = 0; i < 1000; i++) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var price = parseFloat(priceValues[productindex]);
    var quantity = 1 + Math.round(Math.random() * 10);
    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row["productname"] = productNames[productindex];
    row["price"] = price;
    row["quantity"] = quantity;
    row["total"] = price * quantity;
    data[i] = row;
}
var source =
{
    localdata: data,
    datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (data) { },
    loadError: function (xhr, status, error) { }    
});
$("#jqxgrid").jqxGrid(
{
    source: dataAdapter,
    columns: [
        { text: 'First Name', datafield: 'firstname', width: 100 },
        { text: 'Last Name', datafield: 'lastname', width: 100 },
        { text: 'Product', datafield: 'productname', width: 180 },
        { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
    ]
});
        });
    </script>
    </head>
    <body class="default">
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid1"></div>
        </div>
    </body>
</html>

October 22, 2014 at 9:54 am Installation #61489

Peter Stoev

Keymaster

Hi jkapasi,

jquery.js points out that you need a jQuery Framework. You already included it on your page – jquery-1.10.2.min.js and jquery-1.11.1.min.js. I suggest you to remove one of these references because it is not necessary and not advicable to have them both included. If you want, you can also rename any of these files to jquery.js 🙂

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 22, 2014 at 10:11 am Installation #61490

jkapasi

Participant

I removed two js file which were included in the code – jquery-1.10.2.min.js and jquery.js.
Instead of these two I only kept jquery-1.11.1.min.js.

Now I am getting the following error :

‘Unable to get property ‘dataAdapter’ of undefined or null reference’.

I am getting this error at following line:

var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (data) { },
    loadError: function (xhr, status, error) { }    
});

October 22, 2014 at 10:17 am Installation #61491

Peter Stoev

Keymaster

Hi jkapasi,

if you get such error, the references to required scripts are incorrect. I’d suggest you to look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/bindingtoarray.htm?arctic or Getting Started help topics.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 22, 2014 at 11:20 am Installation #61494

jkapasi

Participant

I tried all possible ways of referencing the script files.

I have used the same example from the demos. But I am still facing the same problem of dataadapter.

October 22, 2014 at 12:33 pm Installation #61501

Peter Stoev

Keymaster

Hi jkapasi,

The samples are available in the download package and they’re working there.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.