Data mapping in trees

Webix JS
1

I have a database with several tables. Each table has a different name for its ID column (part_id, module_id, supplier_id, etc.). I’m loading data from these tables into trees using the following XML format:

<data>
    <item>
        <part_id>10</part_id>
        <name>Some part</part_id>
    </item>
</data>

Is there a simple way to specify which of these values the tree uses as its ID and which as its value? I’m thinking of something like mapping in DataTables. I know I could use custom DataDrivers, but I’d have to create a driver for each tree as the column names are different in every table.

2

Hello,

you can define the template for tree items that will define which values from the dataset should be displayed:

template:"#part_id#. #value#",

If you need to redefine the data before tree rendering, you can do it within the data scheme , namely its $init key.

scheme:{
        $init:function(obj){
        	obj.value = obj.name;
        }
      }

In this case you’ll probably need to define $save key as well.

http://webix.com/snippet/ab0175f4

3

Thank you Helga for your reply (and sorry for not responding until now).

While the scheme property looks exactly like what I need, it solves only part of my problem. This is what I did:

scheme: {
    $init: function (obj) {
        obj.id = obj.part_id; // This breaks it
        obj.value = obj.name;
    }
}

It works fine when I only set obj.value, but I get an error once I set obj.id.

Uncaught TypeError: Cannot read property ‘$selected’ of undefined in webix_debug.js:10925

I want to set the ID so that I can use it (for example) in the onSelectChange event. Am I using it wrong?

I am currently using Webix v2.1.1.

4

Hello,

The thing is that IDs in the dataset cannot be changed in such an easy way. To change item id, you should call the changeId(old_id, new_id) method of the component, which is possible after the data has been loaded:

'onAfterLoad':function(){
    this.data.each(function(obj){
         this.changeId(obj.id, obj.part_id)
    })
}

http://webix.com/snippet/c1b9ea9d

Or, you may leave it as it is and get the part_id during selection

on:{
    'onAfterSelect':function(id, e){
        webix.message(this.getItem(id).part_id);
     }
}

http://webix.com/snippet/ca8f4e83

5

Behavior when id can’t be changed in the $init handler is actually a bug, and will be fixed in next updates. For now you can use solutions proposed by Helga

6

Thanks again for your responses. I will work around this issue until it’s fixed.

7

If you have an active license, you can grab Webix 2.1.4 from the support area. It contains a fix for the above issue.