KendoUI: TreeView tricks


One of the things that I like most about Open-Source is that you learn about what others did and how they have solved problems. Here I’m presenting some tricks learnt about KendoUI TreeView.

KendoUI: TreeView tricks

DonĀ“t use parent as dataTextField

Recently, I saw somebody using a feature in KendoUI TreeView that I was pretty sure that it was a mistake. They wrote:

$("#treeview").kendoTreeview({
    dataSource: parent,
    expanded: true,
    dataBound: ondata,
    dataTextField: ["Parent", "Child"]
}).data("kendoTreeView");

And according with the documentation of kendoTreeView.dataTextField it says:

TreeView dataTextField documentation
TreeView dataTextField documentation

Um! It has to a be a string!. Is that array a mistake…? But this code has been commented by one of KendoUI engineers and he didn’t raised any question on it… Let me check what does it mean…

The very first experiment is writing a piece of code that defines a HierarchicalDataSource where all nodes are labeled as parent and not using the array.

    var content = [
        {
            parent:"parent",
            items :[
                { parent:"Child1" },
                { parent:"Child2" },
                { parent:"Child3" },
                { parent:"Child4" }
            ]
        }
    ];

    var tree = $("#tree").kendoTreeView({
        dataSource   :content,
        dataTextField:"parent"
    }).data("kendoTreeView");
    tree.expand(".k-item");

And this is what I get:

Don't user parent as dataTextField
Don’t user parent as dataTextField

Oops! Something is wrong. Seems that parent is a function. Ok! Don’t use parent and use instad Parent (P uppercase).

    var content = [
        {
            Parent:"Parent",
            items :[
                { Parent:"Child1" },
                { Parent:"Child2" },
                { Parent:"Child3" },
                { Parent:"Child4" }
            ]
        }
    ];

    var tree = $("#tree").kendoTreeView({
        dataSource   :content,
        dataTextField:"Parent"
    }).data("kendoTreeView");
    tree.expand(".k-item");

And now it looks like:

Use Parent as dataTextFiled
Use Parent as dataTextFiled

TreeView dataTextField as an array

Now, lets change the definition from a string to an array and in the DataSource use Child as dataTextField.

    var content = [
        {
            Parent:"Parent",
            items :[
                { Child:"Child1" },
                { Child:"Child2" },
                { Child:"Child3" },
                { Child:"Child4" }
            ]
        }
    ];

    var tree = $("#tree").kendoTreeView({
        dataSource   :content,
        dataTextField:[ "Parent", "Child" ]
    }).data("kendoTreeView");
    tree.expand(".k-item");

NOTE: I might use child instead of Child, here there is no problem using lowercase.

Yeah! It works! So seems that it uses the first value of the array (Parent) for the root level and the second value for the children.

TreeView dataTextField with more than two levels

But what happens if children also have children? Should they be Parent, Child or something else?

The answer is they have to have a new value in the array.

  1. It is not a value for nodes that have children and one value for nodes that do not.
  2. It is not that the last value is repeated as many levels as needed.

So the code now looks like:

    var content = [
        {
            Parent:"Parent",
            items :[
                { Child:"Child1" },
                { Child:"Child2" },
                {
                    Child:"Child3",
                    items: [
                        { GrandChild:"GrandChild1" },
                        { GrandChild:"GrandChild2" },
                        { GrandChild:"GrandChild3" }
                    ]
                },
                { Child:"Child4" }
            ]
        }
    ];

    var tree = $("#tree").kendoTreeView({
        dataSource   :content,
        dataTextField:[ "Parent", "Child", "GrandChild"]
    }).data("kendoTreeView");
    tree.expand(".k-item");

Conclusions

Yes, you can use an array and the name of the field used for text is the value on the array corresponding to the level of the node in the tree.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s