Title: DataGrid in Angular environment
Post by: zolotoy on June 20, 2015, 04:06:28 AM
I am trying to add a datagrid to my Angular application. Here is relevant code: main page <!-- jQuery references -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<!-- EasyUI references -->
<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">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
view:
<head>
<title>Angular with JQuery EasyUI</title>
<style type="text/css">
#ff label{
display:block;
width:100px;
}
</style>
</head>
<body>
<div style="padding:3px 2px;border-bottom:1px solid #ccc">Compose Email</div>
<form id="ff" method="post">
<div>
<label for="name">Name:</label>
<input class="easyui-validatebox" ng-model="name" type="text" name="name" required="true">
</div>
<div>
<label for="email">Email:</label>
<input class="easyui-validatebox" ng-model="email" type="text" name="email" required="true" validType="email">
</div>
<div>
<label for="subject">Subject:</label>
<input class="easyui-validatebox" ng-model="subject" type="text" name="subject" required="true">
</div>
<div>
<label for="message">Message:</label>
<textarea name="message" ng-model="message" style="height:60px;"></textarea>
</div>
<div>
<input type="button" value="Send" ng-click="sendEmail()">
</div>
</form>
<br>
<hr>
<div style="padding:3px 2px;border-bottom:1px solid #ccc">Email history</div>
<br>
<div id="patient_table">
<table id="emailhistory" class="easyui-datagrid" data-options="singleSelect:true,collapsible:true,data:{{tableItems}}" style="width:560px;height:400px">
<thead>
<tr>
<th data-options="field:'name',width:'120'">Name</th>
<th data-options="field:'email',width:'120'">Email</th>
<th data-options="field:'subject',width:'120'">Subject</th>
<th data-options="field:'message',width:'200',resizable:true">Message</th>
</tr>
</thead>
</table>
</div>
</body>
Controller $scope.name = "Sam";
$scope.email = "sam@gmail.com";
$scope.subject = "Vacations pics from India";
$scope.message = "Hi, I'll be uploading my vacations pics from India on my dropbox for you all.";
$scope.tableItems = [
{
"name": "Mike",
"email": "mike@gmail.com",
"subject": "Weekly reports mailed",
"message": "Hi Mike, I have send you the weekly reports by mail. They'll be arriving soon."
}];
$scope.sendEmail = function () {
$scope.tableItems.push({ "name": $scope.name, "email": $scope.email, "subject": $scope.subject, "message": $scope.message });
$('#emailhistory').datagrid('loadData', $scope.tableItems);
};
First of all when I run it table "emailhistory" does not look right. See attached. When I click on send Email I have an error in the Console: TypeError: Unable to get property 'options' of undefined or null reference at _643 (http://www.jeasyui.com/easyui/jquery.easyui.min.js:9204:1) at Anonymous function (http://www.jeasyui.com/easyui/jquery.easyui.min.js:10096:1) Please help. Thanks
Title: Re: DataGrid in Angular environment
Post by: stworthy on June 21, 2015, 02:08:37 AM
Please refer to the following links:
http://www.jeasyui.com/forum/index.php?topic=4043.0
http://www.jeasyui.com/forum/index.php?topic=4739.0
Title: Re: DataGrid in Angular environment
Post by: zolotoy on June 21, 2015, 03:43:39 AM
I will take a look. But still it does not explain why the grid has its headers in the middle.
Title: Re: DataGrid in Angular environment
Post by: zolotoy on June 23, 2015, 05:25:06 PM
I am trying following this link: http://www.jeasyui.com/forum/index.php?topic=4739.0. Here an error I am getting when page loads: Error: cannot call methods on tooltip prior to initialization; attempted to call method 'hide'
at error (http://code.jquery.com/jquery-2.1.1.min.js:2:1815)
at Anonymous function (http://code.jquery.com/ui/1.10.1/jquery-ui.min.js:5:5982)
at each (http://code.jquery.com/jquery-2.1.1.min.js:2:2873)
at n.prototype.each (http://code.jquery.com/jquery-2.1.1.min.js:2:838)
at e.fn[n] (http://code.jquery.com/ui/1.10.1/jquery-ui.min.js:5:5864)
at _47c (http://www.jeasyui.com/easyui/jquery.easyui.min.js:6299:1)
at _48d (http://www.jeasyui.com/easyui/jquery.easyui.min.js:6337:1)
at _489 (http://www.jeasyui.com/easyui/jquery.easyui.min.js:6306:1)
at _498 (http://www.jeasyui.com/easyui/jquery.easyui.min.js:6385:1)
at Anonymous function (http://www.jeasyui.com/easyui/jquery.easyui.min.js:6401:1) <input class="ng-pristine ng-untouched ng-valid ng-scope textbox-f" style="display: none;" value="" ng-model="email" data-options="required:true" easyui-textbox="">
Can someone please help?
Title: Re: DataGrid in Angular environment
Post by: stworthy on June 23, 2015, 06:06:35 PM
Please don't use the jquery ui and easyui together. There are some conflicts between these two libraries.
Title: Re: DataGrid in Angular environment
Post by: zolotoy on June 24, 2015, 01:41:52 AM
After commenting jquery ui I got rid of a tooltip message and a sample that uses a directive worked better, but an email sample gives me an error when I click on Send:
TypeError: Unable to get property 'options' of undefined or null reference
at _643 (http://www.jeasyui.com/easyui/jquery.easyui.min.js:9204:1)
at Anonymous function (http://www.jeasyui.com/easyui/jquery.easyui.min.js:10096:1)
at each (http://code.jquery.com/jquery-2.1.1.min.js:2:2873)
at n.prototype.each (http://code.jquery.com/jquery-2.1.1.min.js:2:838)
at $.fn.datagrid.methods.loadData (http://www.jeasyui.com/easyui/jquery.easyui.min.js:10095:1)
at $.fn.datagrid (http://www.jeasyui.com/easyui/jquery.easyui.min.js:9857:1)
at $scope.sendEmail (http://localhost:3030/prismHTML/charts/app/controllers/dygraph.js:63:13)
at Anonymous function (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:199:291)
at f (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:216:74)
at n.prototype.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:4)
Title: Re: DataGrid in Angular environment
Post by: zolotoy on June 30, 2015, 01:24:29 PM
I have gotten a bit further, but seems like need someone's help. My code. Markup <div>
<table easy-grid id="dg" class="easyui-treegrid" title="Folder Browser" style="width:700px;height:250px">
</table>
</div>
Controller: charts.directive('easyGrid',
function () {
return {
restrict: 'AEC',
transclude: true,
link: function (scope, element, attrs) {
element.datagrid({
url: 'treegrid_data2.json',
columns: [[
{ field: 'name', title: 'Name', width: 100 },
{ field: 'persons', title: 'Person', width: 100 }
]],
iconCls: 'icon-ok',
collapsible: true,
method: 'get',
//data: scope.data,
idField: 'id',
treeField: 'name'
});
}
};
});
If I use 'treegrid_data2.json' then I get columns but no data is shown. If I use scope.data as is in my other post then I do get data, but it's hierarchical. I cannot expand or collapse it. Data: var data = '<root><assets ID="1" name="All Assets"><assets ID="104" parentID="1" name="EXAMPLE COMPANY"/><assets ID="109" parentID="104" name="CHICAGO"/></assets></root>';
var xml = $.parseXML(data);
var rows = [];
$(xml).find('assets').each(function () {
rows.push({
id: $(this).attr('ID'),
name: $(this).attr('name'),
_parentId: $(this).attr('parentID')
});
});
$scope.data = { total: rows.length, rows: rows };
Result is attached. Please help, I really need that.
|