Print Page - XML data for TreeGrid

Title: XML data for TreeGrid
Post by: zolotoy on June 24, 2015, 11:08:02 AM

Can I load an xml into tree/treegrid control?

Thanks

Title: Re: XML data for TreeGrid
Post by: jarry on June 24, 2015, 07:04:48 PM

Please use the 'loadFilter' function to change the XML data to the standard data format.

Code:

$('#tg').treegrid({
  loadFilter: function(data,parentId){
    var data = ...;  // convert to the standard data format
    return data;
  }
});

Title: Re: XML data for TreeGrid
Post by: zolotoy on June 25, 2015, 01:26:42 AM

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

Title: Re: XML data for TreeGrid
Post by: jarry on June 25, 2015, 05:39:20 PM

Please refer to the code below:

Code:

$('#tg').treegrid({
	url: 'test3.xml',
	method: 'get',
	idField: 'id',
	treeField: 'name',
	loader: function(param, success, error){
		var opts = $(this).treegrid('options');
		if (!opts.url) return false;
		$.ajax({
			type: opts.method,
			url: opts.url,
			data: param,
			dataType: 'xml',
			success: 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});
			},
			error: function(){
				error.apply(this, arguments);
			}
		});
	}
});

Title: Re: XML data for TreeGrid
Post by: zolotoy on June 25, 2015, 06:35:19 PM

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?

Title: Re: XML data for TreeGrid
Post by: jarry on June 26, 2015, 01:31:35 AM

If you already have the '$scope.data', you can convert it to the json format before loading to the treegrid.

Code:

<script type="text/javascript">
	function MyController($scope){
		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};
	}
</script>
<div ng-controller="MyController">
	<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>

Title: Re: XML data for TreeGrid
Post by: zolotoy on June 26, 2015, 01:40:00 AM

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

Title: Re: XML data for TreeGrid
Post by: zolotoy on June 27, 2015, 02:26:01 AM

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

Title: Re: XML data for TreeGrid
Post by: zolotoy on June 27, 2015, 02:39:04 AM

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

Title: Re: XML data for TreeGrid
Post by: zolotoy on June 27, 2015, 03:08:12 AM

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

Title: Re: XML data for TreeGrid
Post by: zolotoy on June 27, 2015, 03:25:19 AM

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.

Title: Re: XML data for TreeGrid
Post by: jarry on June 28, 2015, 04:57:24 PM

Please refer to http://jsfiddle.net/x270Lh7c/

Title: Re: XML data for TreeGrid
Post by: zolotoy on June 28, 2015, 06:23:28 PM

In reality we do not run html templates with a controller being specified. I am using modules to link templates and their controllers.
Something like this:

Code:

charts = angular.module('prism.charts', []);
charts.config(
	function ($stateProvider,   $urlRouterProvider) {
      $stateProvider
        .state('body.charts', {
          url: 'charts',
          templateUrl: 'views/formandtable.html',
          controller: 'MyController'
        })
});

I cannot get any results.

Title: Re: XML data for TreeGrid
Post by: zolotoy on June 30, 2015, 02:32:24 AM

Here are my results.
It does not work with Angular 1.3.15, or anything above 1.2.1, did not try.
When a sample is run using Angular states and controllers, another words, controller is not in the sample, it does not work. No data.

I like the product, but without running it in Angular environment, I cannot use it.

Title: Re: XML data for TreeGrid
Post by: jarry on July 01, 2015, 01:03:15 AM

You can custom a directive and set the treegrid data to ng-model. Please refer to this code.

Code:

<script>
var charts = angular.module('charts', []);
charts.directive('easyuiTreegrid', function(){
	return {
		restrict: 'AE',
		require:'ngModel',
		link: function(scope, elem, attrs, ngModel){
			$(elem).treegrid();
			ngModel.$render = function(value){
				$(elem).treegrid('loadData', ngModel.$viewValue);
			}
		}
	}
});
</script>
<table id="tg" easyui-treegrid ng-model="data" title="Folder Browser" style="width:700px;height:250px"
		data-options="
			idField: 'id',
			treeField: 'name'
		">
	<thead>
		<tr>
			<th data-options="field:'name'" width="220">Name</th>
		</tr>
	</thead>
</table>

The example is available from http://jsfiddle.net/4qsbzk11/

Title: Re: XML data for TreeGrid
Post by: zolotoy on July 01, 2015, 02:18:54 AM

Yes, it started working, thanks for the help.
Can you tell me if it's going to work with later Angular? Like I said, it does not with 1.3.15.
Also when it runs it does not look exactly as examples. I am attaching a screenshot.

Thanks

Title: Re: XML data for TreeGrid
Post by: zolotoy on July 01, 2015, 02:26:15 AM

Just figured out why it looked differently. I am using Foundation
<link rel='stylesheet prefetch' href='http://cdn.foundation5.zurb.com/foundation.css'>
Without this link it looks right.

Do you think it might work together?

Title: Re: XML data for TreeGrid
Post by: zolotoy on July 01, 2015, 12:23:04 PM

I am starting getting some results. While I am seeing data in the treegrid I am also getting errors in the Console:
TypeError: Unable to get property 'parent' of undefined or null reference
at Anonymous function (http://www.jeasyui.com/easyui/jquery.easyui.min.js:11530:1)
at each (http://code.jquery.com/jquery-2.1.4.min.js:2:2875)
at n.prototype.each (http://code.jquery.com/jquery-2.1.4.min.js:2:838)
at $.fn.treegrid.methods.loadData (http://www.jeasyui.com/easyui/jquery.easyui.min.js:11529:1)
at $.fn.treegrid (http://www.jeasyui.com/easyui/jquery.easyui.min.js:11498:1)
at ngModel.$render (http://localhost:3030/prismHTML/alarms/app/controllers/alarmController.js:32:17)
at Anonymous function (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:172:398)
at g.prototype.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:98:303)
at g.prototype.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:101:155)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:67:173)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: zolotoy on June 24, 2015, 11:08:02 AM