[aigleborgneParticipant]

Thanks Peter, great example!
I was doing wrong at listening at contextmenu event, I should have looked at rowclick or cellclick event
Thank you again !

[aigleborgneParticipant]

Okay, I finally managed to do it with the following code. While it is working, it is quite tedious for a simple grid, I guess I could do a wrapper for settings parameters. Thank you!

		var source = {
					localdata: $scope.creatures,
					datafields: [
					   { name: 'resource', type: 'string' },
					   { name: 'game', type: 'string' }
					],
					datatype: "array"
			};
			
			var dataAdapter = new $.jqx.dataAdapter(source);

			var columns = [ {
				text : $translate.instant('CREATURE.FIELDS.RESOURCE'),
				dataField : 'resource',
				width : 100
			}, {
				text : $translate.instant('CREATURE.FIELDS.NAME'),
				dataField : 'game',
				width : 200
			}
			];
			
			$scope.settings = {
					altrows : true,
					width : 900,
					height : 400,
					source : dataAdapter,
					columns : columns,
					rowselect: function(event) {
						$scope.selectedRow = event.args.row;
					}
			};

[aigleborgneParticipant]

I will try your suggestion but still, it doesn’t explain why it doesn’t work properly in my case as I exactly used the same code I found in your example.
It looks like a bug or something close.

It should work with a data-adapter as I was using this in the past, along with my own grid directive which was internally using a data-adapter to set datasource.
Angular’s documentation shows how to use directives to control one widget but it can be ambiguous when using several widgets all-together.
For example, in jqx-grid, I could try to add jqx-data-adapter in my directive, but then, I have to connect it with jqx-grid directive.

Or eventually, I have to use a direct call to data-adapter object in my controller and affects it to columns.
When I look to jq-grid documentation, there is no columns properties, this one is excluvisely used by jqx-grid directive.

So yes, there are plenty examples and a strong documentation, but it doesn’t cover anything, especially in angulation direction.

Regards

[aigleborgneParticipant]

It doesn’t solve my issue. This is the code I used:

<div data-jq-tabs>
	<ul>
	  <li data-ng-repeat="mod in mods" data-ng-class="{ active: $state.includes('spells.list') && $stateParams.modId == mod.id }">
	 	<a data-ui-sref="spells.list({modId: mod.id})">{{mod.name}}</a>
	  </li>
	</ul>
	<div data-ng-repeat="mod in mods"></div>
</div>

	module.directive('jqTabs', [ '$compile', '$timeout', '$jqCommon', '$jqTabs', function JqTabsDirective($compile, $timeout, $jqCommon, $jqTabs) {
		return {
			restrict : 'AE',
			link : function(scope, element, attributes) {
				var params = scope.$eval(attributes.jqTabs) || {};
				var options = angular.extend({}, $jqCommon.options(), $jqTabs.options(), params);
				$timeout(function() {
					element.jqxTabs(options);
				});
			}
		};
	} ]);

Pretty simple, but my tabs have an empty content since I am rendering a unique view for all of them:

		$stateProvider.state('spells.list', {
			url : '/:modId',
			views : {
				'spell-list' : {
					controller : 'SpellListController',
					templateUrl : 'spell/spell-list.tpl.html',
				}
			},
			resolve : {
				spells : [ 'SpellService', '$stateParams', function(SpellService, $stateParams) {
					var spells = SpellService.getSpells($stateParams.modId);
					return angular.isDefined(spells.$promise) ? spells.$promise : spells;
				} ]
			}
		});

So, as for tab content, I have one div pointing to the view:
<div class="tab-view" data-ui-view></div>

I will play around to see if I can find a good solution!

[aigleborgneParticipant]

Hi,

I have just tested your example and it works.
After comparing it with my code, I noticed the difference is datatype.

You used json while I used arrays. In my understanding, I am providing an arrays of objects. Objects are provided using json format since it is returned by an ajax call. If I replace it with json, it works too.
But I don’t understand exactly how it is proceeded internally. arrays was certainly not a so bad option because everything works except sub-object reading when null.

It might still be a problem with arrays or I have missed something about this datatype.
Maybe, you could add documentation about each datatype use cases.

[aigleborgneParticipant]

I am using the latest version so this problem should be reproduced easily.
As I said earlier, this following code doesn’t work with current version. Autobind will make it fail.

$scope.categories = [{"id":3,"parent":{"id":1,"parent":null,"name":"Groups","creatures":null,"children":null},"name":"Amazons","creatures":null,"children":null},{"id":6,"parent":{"id":5,"parent":null,"name":"Monster","creatures":null,"children":null},"name":"Bear","creatures":null,"children":null},{"id":7,"parent":{"id":6,"parent":{"id":5,"parent":null,"name":"Monster","creatures":null,"children":null},"name":"Bear","creatures":null,"children":null},"name":"Black bear","creatures":null,"children":null},{"id":8,"parent":{"id":6,"parent":{"id":5,"parent":null,"name":"Monster","creatures":null,"children":null},"name":"Bear","creatures":null,"children":null},"name":"Brown bear","creatures":null,"children":null},{"id":10,"parent":{"id":5,"parent":null,"name":"Monster","creatures":null,"children":null},"name":"Cat","creatures":null,"children":null},{"id":1,"parent":null,"name":"Groups","creatures":null,"children":null},{"id":11,"parent":{"id":10,"parent":{"id":5,"parent":null,"name":"Monster","creatures":null,"children":null},"name":"Cat","creatures":null,"children":null},"name":"Jaguar","creatures":null,"children":null},{"id":12,"parent":{"id":4,"parent":{"id":1,"parent":null,"name":"Groups","creatures":null,"children":null},"name":"Mines","creatures":null,"children":null},"name":"Mercenary 1","creatures":null,"children":null},{"id":4,"parent":{"id":1,"parent":null,"name":"Groups","creatures":null,"children":null},"name":"Mines","creatures":null,"children":null},{"id":5,"parent":null,"name":"Monster","creatures":null,"children":null},{"id":9,"parent":{"id":6,"parent":{"id":5,"parent":null,"name":"Monster","creatures":null,"children":null},"name":"Bear","creatures":null,"children":null},"name":"Polar bear","creatures":null,"children":null}];
		var dataAdapter = new $.jqx.dataAdapter({
			localdata : $scope.categories,
			datafields : [ {
				name : 'id',
				type : 'number'
			}, {
				name : 'name',
				type : 'string'
			}, {
				name : 'parentId',
				map : 'parent>id',
				type : 'number'
			} ],
			id : 'id',
		}, { autoBind: true });
		
		var data = dataAdapter.getRecordsHierarchy('id', 'parentId', null, [ {
			name : 'name',
			map : 'label'
		} ]);

[aigleborgneParticipant]

Hi,

It’s just an internal change until a fix is released. I don’t have much choice here : if I can’t use adapter right now, I will be forced to use another ui-library…

What are you suggesting then? What ETA could you give for a fix? Is there any other alternative?

[aigleborgneParticipant]

On a side note, mapChar doesn’t work but mapchar does.
Again, a camelcase problem and this time, documentation is wrong.

[aigleborgneParticipant]

I solved it. I debugged the entire bloc to understand what it does.

                                    for (var ah = 0; ah < ag.length; ah++) {
                                        ak = ak[ag[ah]];
                                     	if (ak == null) {
                                    		break;
                                    	}
                                    }

So, it tries to reach property by progressing each step in sub-object (separating by mapChar, default ‘>’).
But without my test, it would throw an exception if any sub-object is null, because next step couldn’t be parsed.
This simple test will stop trying to get property if any sub-object is null.

After this fix, my tree is correctly displayed and I think everything is good.

[aigleborgneParticipant]

I invvestigated a bit and found out where is the problem.
Line 283 in jqx-data.js:

                                var ag = ai.map.split(ae.mapChar);
                                if (ag.length > 0) {
                                    var ak = al;
                                    for (var ah = 0; ah < ag.length; ah++) {
                                			 ak = ak[ag[ah]];
                                    }
                                    ao = ak
                                } else {
                                    ao = al[ai.map]
                                }

This doesn’t handle null parent object:
ak = ak[ag[ah]];
But even if I add a null test, it doesn’t produce any error but tree isn’t displayed either.

if (ak[ag[ah]]) {
  ak = ak[ag[ah]];
}

[aigleborgneParticipant]

Here is my code:

		$scope.categories = [{"id":3,"parent":{"id":1,"parent":null,"name":"Groups","creatures":null,"children":null},"name":"Amazons","creatures":null,"children":null},{"id":6,"parent":{"id":5,"parent":null,"name":"Monster","creatures":null,"children":null},"name":"Bear","creatures":null,"children":null},{"id":7,"parent":{"id":6,"parent":{"id":5,"parent":null,"name":"Monster","creatures":null,"children":null},"name":"Bear","creatures":null,"children":null},"name":"Black bear","creatures":null,"children":null},{"id":8,"parent":{"id":6,"parent":{"id":5,"parent":null,"name":"Monster","creatures":null,"children":null},"name":"Bear","creatures":null,"children":null},"name":"Brown bear","creatures":null,"children":null},{"id":10,"parent":{"id":5,"parent":null,"name":"Monster","creatures":null,"children":null},"name":"Cat","creatures":null,"children":null},{"id":1,"parent":null,"name":"Groups","creatures":null,"children":null},{"id":11,"parent":{"id":10,"parent":{"id":5,"parent":null,"name":"Monster","creatures":null,"children":null},"name":"Cat","creatures":null,"children":null},"name":"Jaguar","creatures":null,"children":null},{"id":12,"parent":{"id":4,"parent":{"id":1,"parent":null,"name":"Groups","creatures":null,"children":null},"name":"Mines","creatures":null,"children":null},"name":"Mercenary 1","creatures":null,"children":null},{"id":4,"parent":{"id":1,"parent":null,"name":"Groups","creatures":null,"children":null},"name":"Mines","creatures":null,"children":null},{"id":5,"parent":null,"name":"Monster","creatures":null,"children":null},{"id":9,"parent":{"id":6,"parent":{"id":5,"parent":null,"name":"Monster","creatures":null,"children":null},"name":"Bear","creatures":null,"children":null},"name":"Polar bear","creatures":null,"children":null}];
		var dataAdapter = new $.jqx.dataAdapter({
			localdata : $scope.categories,
			datafields : [ {
				name : 'id',
				type : 'number'
			}, {
				name : 'name',
				type : 'string'
			}, {
				name : 'parentId',
				map : 'parent>id',
				type : 'number'
			} ],
			id : 'id',
		}, { autoBind: true });
		
		var data = dataAdapter.getRecordsHierarchy('id', 'parentId', null, [ {
			name : 'name',
			map : 'label'
		} ]);

Purpose is to output a tree through jqTree.
autoBind is responsible for the error I mentionned.
I don’t really understand what it really do and documentation is not very clear on this subject. Since sources are minified, I can’t debug either.

If I remove autoBind, I don’t get any error but my tree is empty for some reason.
Well, there might be some solution around, but it probably requires a good knowledge of data-adapter which I obviously don’t have.

[aigleborgneParticipant]

I will test this, but it has certainly changed because all my code are copy&paste from documentation and live demo, and I did this a few months ago. The fact that it is working when dataFields and cellClick are in camel case confirm my point, doesn’t it ?

Thank you for your support !

[aigleborgneParticipant]

The code you mentioned is a wrapper, but the source properties are untouched.

		var getDataAdapter = function(source, settings) {
			source.datafields = getDatafields(source.datafields);
			var params = angular.extend({}, dataAdapterOptions, settings);
			return new $.jqx.dataAdapter(source, params);
		};

I meant events related to jqGrid component. For some reasons, they don’t get fired if my data adapter used datafields (like in documentation) instead of dataFields (which must be a previous version since I had it in my code).

In my case, I am catching event related to cell click:

iElement.on("cellClick", function(event) {
	event.stopPropagation();
	$scope.$apply(function() {
		var item = $scope[params.data][event.args.rowindex];
		params.events.cellClick($scope.$parent, item, event.args.columnindex);
	});
});

All this code works perfectly when my data-adapter use dataFields property, but not with datafields.

[aigleborgneParticipant]

My mistake, promise was not resolved at the time beeing. So much refactoring on my code I thought it was !
Now it is resolved, it worked perfectly

[aigleborgneParticipant]

I have already tried your example previously and it didn’t work.
All items and children will be showed in tree component but children name field will not be mapped as label ! And I am pretty sure that their children is not mapped as items as well.

I have a hierarchy, yes, but field names are different and thus, require a conversion or mapping. I can do on my own eventually, but this is not the best solution as I might have some business logic on javascript side and I prefer to work with my own structure.

[Author]

Posts