creation of datagrid not working

EasyUI Forum

April 18, 2024, 08:02:22 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > General Discussion > creation of datagrid not working

Pages: [1]

« previous next »

Author

Topic: creation of datagrid not working (Read 20031 times)

gib65

Newbie

Posts: 29

creation of datagrid not working

« 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.


	Logged

Max Lamda

Newbie

Posts: 48

Re: creation of datagrid not working

« Reply #1 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>


	Logged

gib65

Newbie

Posts: 29

Re: creation of datagrid not working

« Reply #2 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?


	Logged

gib65

Newbie

Posts: 29

Re: creation of datagrid not working

« Reply #3 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:


	Logged

Pierre

Sr. Member

Posts: 439

Re: creation of datagrid not working

« Reply #4 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.


	Logged

gib65

Newbie

Posts: 29

Re: creation of datagrid not working

« Reply #5 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.


	Logged

Pages: [1]

« previous next »