Using a common DataCollection for several group lists

I need to use a common data structure to initialize several lists with the same data. Using the following mechanism the list remains blank with no errors. Is this the correct approach:

//during startup a JSON structure representing 
//a grouplist is fetched and added to a dataCollection

    SetHierarchy: function (text, xml, XmlHttpRequest) {
        var _a = this;
        try {

            // HIERARCHY is a global
            __HIERARCHY = new dhx.DataCollection({ datatype: "json" });

            __HIERARCHY.parse(dhx.DataDriver.json.toObject(text, xml), "json");

        } catch (e) {
            _a.Error("SetHierarchy", e)

//elsewhere in the code

    showFilterView: function () {
        var _a = this;
        try {

            $$(_a.NAME + '_filterHierarchy').show({ type: "slide", subtype: "in" });
			if(!_a.hierarchyBound) {

                if( __HIERARCHY == null ) {
                    _a.logToConsole("showFilterView: Sleeping..");

                $$(_a.NAME + '_filterHierarchy').sync( );
                _a.hierarchyBound = true;

Interestingly the dhx.copy method does not seem to work either on this structure.

var localHeirarchy = dhx.copy( __HIERARCHY );
_a.logToConsole( _a.localHeirarchy );

[ > Object ]



You need to use sync() method like so:

var data = new dhx.DataCollection({
url: ‘data.php’


Hello Alexandra,

The code example above is essentially using the same method with the exception of the additional load command.

var data = new dhx.DataCollection();


Does the DataCollection need to be confirmed loaded before the sync will work?

I would appreciate you looking into this as I cannot get this to work using your method. There are no errors logged but the group list is not rendered

// When view is displayed
data = new dhx.DataCollection({ datatype: "json" });
data.attachEvent('onxle', dhx.bind(_a.syncFilter, _a) );
data.load( _a.URL);

// onxle
$$(_a.NAME + '_filterHierarchy').sync( data );
$$(_a.NAME + '_filterHierarchy').showItem( _a.nodeID );

I also notice the example on your site isn’t working … _fill.html


Does the DataCollection need to be confirmed loaded before the sync will work?

Data can be loaded after sync() call. I have attached the demo. Please take a look. If the problem is not solved, please attach the demo.

Thank you for the information about the sample. We’ll check it. (204 KB)

The issue appears to affect the grid list.

Code attached
groupList_sync_issue.rar (190 KB)


Sorry, I did not pay attention to the “group” word in the question title.

sync() method can not be used for TreeStore components which is grouplist. Therefore, I would recommend to use parse method in this case:

var data = new dhx.DataCollection(); data.load("books_tree.xml","xml",function(){ var items = data.serialize(); $$("mylist1").parse(items); $$("mylist2").parse(items); });

If sync() is required, let me know - I’ll attach the solution.

This approach does not work.

When the second group list parses the DataCollection the second list is only partially populated. I would appreciate a solution to this issue either via the parse method or sync.

Code example attached.

grouplist_parse_issue.rar (190 KB)


serialize() method doesn’t create a copy of data objects. And you need copies in this case. Here is the workaround for this issue:

var items = JSON.stringify(__HIERARCHY.serialize());

instead of

var items = __HIERARCHY.serialize(); (207 KB)

This is now working perfectly.

Thank you,