tree control not present in form's elements

Webix JS
1

Hi,
I have a form that contains multiple trees. I am add tree control on the form as below:

 {
            "view": "text",
            "name": "firstname",
            "label": "First Name",
            "labelWidth": "100"
},
 {
            "view": "text",
            "name": "lastname",
            "label": "Last Name",
            "labelWidth": "100"
 },
{
            name: "ABC",
            cols: [
                {
                    view: "label",
                    id: "lblABC",
                    "label": "lblABC",
                    width: 100
                },
                {
                    "view": "tree",
                    "name": "treeABC",
                    id: "treeABC",
                    data: treedataABC,
                    template: "{common.icon()} {common.checkbox()}   #value#",
                    threeState: true,
                    height: 150,
                    width: 260
                }
            ]
 }

…
… other tree controls

when form is loaded everythings is redered fine. But when I check form’s “elements” using $$(“formName”).elements, I don’t see any of the tree controls in there. All other controls except tree are present in “elements”.

Is it something that I am doing wrong. Please guide.

Thank you.

2

To be in elements collection, view must conform to next rules

  • has getValue, setValue methods
  • has name attirubute

As normal tree doesn’t have setValue and getValue method, it was not included in elements collection.

Please check the next snippet
http://webix.com/snippet/71bdaea2

It show how a custom tree widget can be created, that can be used as part of form.

3

Thanks a lot Maksim

4

Now I have tree controls in elements collection. Will OnChange event for fire for tree control on form?

Also, how can I get label for tree? Currently I am using cols that contains a label and tree. Is there any other way or do I have to write a custom tree control to get a label for tree?

5

Will OnChange event for fire for tree control on form?

Nope, but it can be added.

Check Code Snippet

6

Thanks Maksim. Could you please answer following question as well:

Also, how can I get label for tree? Currently I am using 2 cols (one label view and another for tree view) that contains a label and tree. Is there any other way or do I have to write a custom tree control to get a label for tree? If possible kindly provide a sample.

In some cases my tree doesn’t have a top level root node (i.e. node will level = 0 is not present at all). Is there a way to figure that out?

Thanks in advance.

7

The solution with separate columns is the best one.

It is possible to wrap both columns with tree and label in a separate component, but it is too much hassle for too small benefits.

8

Ok. Thanks Makism.

Any advise on the following:

In some cases my tree doesn’t have a top level root node (i.e. node will level = 0 is not present at all). Is there a way to figure that out? Data bound to tree is something like below:

[
{ id: “1”, value: “Test1” },
{ id: “2”, value: “Test2” },
{ id: “3”, value: “Test3” },
{ id: “4”, value: “Test4” }
];

I want to give this x height. All the nodes should be visible on load without scroll bar.

Another tree on the same form has root node, and this has to be collapsed on load. Height for this is y (where y < x). Only root node should be visible on load. On expand and collapse I am handling height.

{
id: “1.”, value: “Root node”, data: [
{ id: “1.1”, value: “Part 1” },
{ id: “1.2”, value: “Part 2” },
{ id: “1.3”, value: “Part 3” }
]
}

I have written a generic code for tree config and I want the height of the tree should be set dynamically based on whether tree has a top level root node or not.

9

Check the next snippet
http://webix.com/snippet/22a7e061

You can use .ready handler to run code after initial loading, and you can set height of control based on count of visible items there.