EasyUI Forum
October 19, 2025, 04:46:50 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > DataGrid in Angular environment
Pages: [1]
« previous next »
  Print  
Author Topic: DataGrid in Angular environment  (Read 23484 times)
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« 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
Code:
<!-- 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:
Code:

<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
Code:
 $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
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #2 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.
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #3 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:
Code:
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?
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #4 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.
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #5 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)
Logged
zolotoy
Jr. Member
**
Posts: 89


View Profile Email
« Reply #6 on: June 30, 2015, 01:24:29 PM »
I have gotten a bit further, but seems like need someone's help.
My code.
Markup
Code:
<div>
        <table easy-grid id="dg" class="easyui-treegrid" title="Folder Browser" style="width:700px;height:250px">
        </table>
    </div>

Controller:
Code:
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:
Code:
 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.
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!