hasThreeState not working properly

[SilvioParticipant]

I have an annoying issue with my tree view control. It will be hard to create the jsFiddle for it since I’m wrapping the component on angular, but I’ll try explaining it here.

What happens is that the hasThreeStates property is working in a weird way. I load my tree with the data and when I click on any element on any of the first categories (except the last), the parent doesnt change to “threestate” mode. When I deselect the same child, the parent category keeps just the same.

However , when I click on any child from the LAST category, the threestate occurs normally on that parent, and from that point on all categories are now respecting the threestate mode.

My code:

I set the data and definition on the controller:

//data
$scope.data = “categories”: [{ “id”: “1”, “label”: “Cat1”, “expanded”: true,
“items”: [
{ “id”: “11”, “label”: “Child1”, “cellsformat”: “”, “cellsalign”: “left”, “selected”: false },
{ “id”: “6”, “label”: “Child2”, “cellsformat”: “”, “cellsalign”: “left”, “selected”: false },
{ “id”: “5”, “label”: “Child3”, “cellsformat”: “”, “cellsalign”: “left”, “selected”: false },
{ “id”: “14”, “label”: “Child4”, “cellsformat”: “”, “cellsalign”: “left”, “selected”: false },
{ “id”: “10”, “label”: “Child5”, “cellsformat”: “”, “cellsalign”: “left”, “selected”: false },
{ “id”: “13”, “label”: “Child6”, “cellsformat”: “”, “cellsalign”: “left”, “selected”: false }
]},
{ “id”: “2”, “label”: “Cat2”, “expanded”: true,
“items”: [
{ “id”: “4”, “label”: “Child7”, “cellsformat”: “”, “cellsalign”: “left”, “selected”: false },
{ “id”: “22”, “label”: “Child8”, “cellsformat”: “MM/dd/yyyy”, “cellsalign”: “right”, “selected”: false },
{ “id”: “21”, “label”: “Child9″,”cellsformat”: “”, “cellsalign”: “left”, “selected”: false },
{ “id”: “8”, “label”: “Child10”, “cellsformat”: “N2”, “cellsalign”: “right”, “selected”: false },
{ “id”: “23”, “label”: “Child11″,”cellsformat”: “N2”, “cellsalign”: “right”, “selected”: false },
]},
{ “id”: “3”, “label”: “Cat3”, “expanded”: true, “items”: [
{ “id”: “11”, “label”: “Child12”, “cellsformat”: “N5”, “cellsalign”: “right”, “selected”: false },
{ “id”: “10”, “label”: “Child13”, “cellsformat”: “N5”, “cellsalign”: “right”, “selected”: false },
{ “id”: “6”, “label”: “Child14”, “cellsformat”: “N2”, “cellsalign”: “right”, “selected”: false },
{ “id”: “8”, “label”: “Child15”, “cellsformat”: “N0”, “cellsalign”: “right”, “selected”: false },
]}
, { “id”: “4”, “label”: “Cat4”, “expanded”: true,
“items”: [
{ “id”: “7”, “label”: “Child16”, “cellsformat”: “N2”, “cellsalign”: “right”, “selected”: false },
{ “id”: “9”, “label”: “Child17”, “cellsformat”: “N2”, “cellsalign”: “right”, “selected”: false },
{ “id”: “11”, “label”: “Child18”, “cellsformat”: “N2”, “cellsalign”: “right”, “selected”: false },
]}]

//definition
$scope.definition =
{
hasThreeStates: true,
checkboxes: true,
height: ‘450px’,
width: ‘350px’
};

and pass it into the directive that loads the data and definitions
<tree my-tree=”definition” my-data=”data” ></div>

var tree = angular.element(element);
var source = scope[attrs.myTree];
angular.extend(source, { source: scope[attrs.myData] });
$timeout(function () {
tree.jqxTree(source);
}, 40);

It works well, but the behaviour is odd.

Have you guys seen something like it before ? I’ll post a jsFiddle as soon as I can . (renamed some vars, code might not work right if copy+pasted)

Just trying to get some sense of where the problem might be, maybe the configuration is missing something since i’m loading the json-like data without dataadapter (but I know it works from an existing jsFiddle).

Thanks in advance,
Silvio

[SilvioParticipant]

An update: I identified that some items in the category do not trigger the threestate on the parent. Will investigate further the data now.

[SilvioParticipant]

I was able to reproduce and find out what was happening. I am going to write it down here for documentation purposes, but the problem was on my data.

The reason was that my Id’s on each item were being generated by a wrong field, which would repeat itself after a while. So , when there are repeated id’s , the hasthreestates property does not work so well.

This is a jsFiddle to reproduce it

http://jsfiddle.net/silvioamaral/65MeN/

Cheers

[Author]

Posts