Print Page - creation of datagrid not working

Title: creation of datagrid not working
Post by: gib65 on March 06, 2017, 08:53:01 AM

Hello,

I'm trying the following code to create a data grid, but it doesn't seem to be working:

Code:

<head>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>

<body>
<table id="EasyUI_DataGrid" title="DataGrid" style="width:700px;height:250px" data-options="singleSelect:true,data:data">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>

<script>
$(document).ready(function()
{
// EasuUI DataGrid
var data = [
{ "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },
{ "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "N", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },
{ "productid": "RP-LI-02", "productname": "Iguana", "unitcost": 12.00, "status": "N", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },
{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },
{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },
{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "N", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" },
{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": 92.00, "status": "N", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
];

var dg = $('#EasyUI_DataGrid').datagrid();
});

</script>

</body>

I get an error in the Chrome console that says: "$(...).datagrid is not a function."

I get that error from this line:

var dg = $('#EasyUI_DataGrid').datagrid();

I believe all my references in the head are correct. Can anyone see what I'm doing wrong? Thanks.

Title: Re: creation of datagrid not working
Post by: Max Lamda on March 07, 2017, 08:06:21 AM

You should define "data" outside the ready function and please enclose the whole document in <html> and </html>

Title: Re: creation of datagrid not working
Post by: gib65 on March 07, 2017, 10:12:41 AM

Thanks Max,

Placing the initialization of data outside the ready function works when I'm just building the page in Notepad. You can see it at http://www.shahspace.com/easyui/index.html

But in my Visual Studio 2015 application, it still gives me the message: Uncaught TypeError: $(...).datagrid is not a function. And no grid shows up on the page.

Is it possible this might happen if we have a conflict of JQuery references? I know the application uses JQuery (can't find the reference to it) and the references:

http://code.jquery.com/jquery-1.7.1.min.js
http://www.jeasyui.com/easyui/jquery.easyui.min.js

...seem to also reference JQuery.

Could this be causing a clash?

Title: Re: creation of datagrid not working
Post by: gib65 on March 07, 2017, 10:23:56 AM

Follow up...

Going a few steps further, I tried putting the references in the actual page with the grid (as opposed to the master page). <-- That worked!

I still get errors in the Chrome console though. Any idea why these might be happening:

(http://www.shahspace.com/easyui/errors putting refs in page.png)

Title: Re: creation of datagrid not working
Post by: Pierre on March 07, 2017, 11:41:04 PM

Quote from: gib65 on March 07, 2017, 10:12:41 AM

Your sample works without any error. You must have both (jQuery and EasyUI) so your code is correct. You need to take a look at your app.js, line 4664 for possible errors.

Title: Re: creation of datagrid not working
Post by: gib65 on March 08, 2017, 09:11:11 AM

Thanks Pierre,

I fixed the problem by commenting out the JQuery reference for the grid like so:

Code:

Since we already have JQuery integrated into the application globally, there is no need to reference another version of it. I think what was happening was that since I had the reference to JQuery 1.7.1 in the page with the grid, it was overriding our other JQuery reference, which is a later version. It therefore hit the line $.validator.setDefaults(defaultOptions); on line 4664 of app.js and didn't recognize "validator" which is not defined in 1.7.1.

EasyUI Forum

General Category => General Discussion => Topic started by: gib65 on March 06, 2017, 08:53:01 AM