Last test. If I run my page (actually your example) directly in Chrome from within my web it works fine, but running inside of Angular produces the above results.

BTW, in Chrome the table looks correctly, but no data. How there can be any difference between browsers?

I am also using your example with data from a json file inside of my Angular application and getting same results. No data is shown, headers are in the middle of the table.
I really need that to resolve before I can move on the next evaluation step.

Thanks

Still cannot get it to work.
Here is my code:
markup:

Code:

<div>
        <table id="tg" class="easyui-treegrid" title="Folder Browser" style="width:700px;height:250px"
               data-options="data {{data}} , idfield 'id', treefield 'name'">
            <thead>
                <tr>
                    <th data-options=" field:'name'" width="220">Name</th>
                </tr>
            </thead>
        </table>
    </div>

Controller:

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 };

The data is Ok but the table looks as attached. No data, header is in the middle. Please help.

Thanks

I am not sure where in your code you are converting xml into json.

I am using Angular.
Can it be as simple as this in some directive?
$('#tg').treegrid({
   url: $scope.data,
        loader: function(data){
            var rows = [];
            $(data).find('assets').each(function(){
               rows.push({
                  id: $(this).attr('ID'),
                  name: $(this).attr('name'),
                  _parentId: $(this).attr('parentID')
               });
            })
            success({total:rows.length,rows:rows});

Something like this?

So, xml needs to be changed to json, right? Do you have any built-in functions to accomplish that? For example, I have the attached xml structure. But I have to write a filter function to convert it to json in order to show in the grid? Do you have any samples or at least some guidelines of creating such functions that would deal with different xml structures?

Thanks

Can I load an xml into tree/treegrid control?

Thanks

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)

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?

I will take a look. But still it does not explain why the grid has its headers in the middle.

Can we instantiate components like datagrid in the code?

Thanks

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

Is there a sample of having a custom renderers for a datagrid column? Like for example, when a mouse is moved over a cell it shows icons to click on?

Thanks