XML data for TreeGrid

[zolotoy]

Can I load an xml into tree/treegrid control?

Thanks

[jarry]

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

[zolotoy]

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

[jarry]

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

[zolotoy]

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?

[jarry]

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>

[zolotoy]

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

[zolotoy]

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

[zolotoy]

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

[zolotoy]

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

[zolotoy]

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.

[jarry]

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

[zolotoy]

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.

[zolotoy]

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.

[jarry]

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/