ID field for nodes loaded from data source

[Jacob]

Hi,

I am aware that I can pass additional data to the tree view nodes when constructing the HTML list:

<li data-id="id_1234">Item 1</li>

However, I construct my tree view in JS, from a JSON object and have (AFAIK) no way to pass additional data to the nodes. I am thinking of something like:

{

    text: "Item 1",

    data-id: "id_1234"

}

How should I solve this? (Background: I need this "id" to save it into local storage, and later use it when user reloads page so that tree view "remembers" which node should be selected.)

Thanks!
Jacob

[Jacob]

Also, I have noted that there's not onInit callback, so I don't really have anything to bind the select() method to. 

Are you going to support this behavior? I think it's an important part of functionality missing here - loading tree view with a pre-selected node should be here from start.

[Alex Gyoshev]

Hi Jacob,

Indeed having additional node data is not yet possible. We are planning to enable it once the treeview binds to an actual datasource -- currently, it binds to a JSON object only. Once we have a hierarchical datasource that the treeview can be bound to, each data item will contain an arbitrary number of fields, much as the other components.

Regarding the init event, you can simply call the select() method after you initialize the treeview from its jQuery plug-in (the kendoTreeView() call).

Greetings,
Alex Gyoshev
the Telerik team

[Jacob]

Thanks for your answer, Alex!

Any idea if this is going to make it into 1.0 in late 2011?

[Alex Gyoshev]

Most probably it won't make it for the 1.0 version (in November). We need to get the model bindings first, and then integrate the datasource in the treeview -- and we're not sure if we'll manage to do it in a month, along with the other items on the roadmap. The feature is also logged on uservoice, so if you feel like it, you can vote to raise its priority.

Kind regards,
Alex Gyoshev
the Telerik team

[Arun]

Hi Alex...
 First lemme thankyou for the your tools which made developers life easy......

I have a small scenario please help me how i can solve that i have a dynamic tree for which i used jendo no all i whant is i have to assign some id to each node and onclick of that node i have get that id , so that i will pass it to a geneic handler and process according to it... so please tell me how to do this with kendo ui..........


Thanks in advance...

[Mike]

I'd just like to put in my two cents that I feel that this is a critical feature for this component.

[Alex Gyoshev]

Hello all,

We know that this is very important for most of the scenarios that use the TreeView. We have planned to implement this for the next release (Q1.2012).

All the best,
Alex Gyoshev
the Telerik team

[Zeke]

Currently i have same problem like this, and I try to solve this with adding a hidden <span> object inside text node..

here's my changes:
added in line 176

#= dataobject(item) #

added in line 1074

dataobject: function(item) {

    return "<span style='display:none;' class='tree_dataobject'>" + (item.data == undefined ? '{}' : JSON.stringify(item.data)) + "</span>";

},

and some function to extract node info:

var str_left = function(as_string, length) { if (as_string == undefined || as_string == null || typeof (as_string) != 'string') return ''; else if (as_string.length < length) { return as_string } else { return as_string.substr(0, length) } };


var TreeNodeText = function(node){ var ls_text = $(node).find('.k-in:first').text(); return str_left(ls_text, ls_text.indexOf('{')); };


var TreeNodeData = function(node){ try{ eval('var lo_data = '+$(node).find('.tree_dataobject:first').html()); return lo_data; }catch(e){ return {}; } };

so.. now I can use object info inside item like this:

var treeview_api = $("#treeview_api").kendoTreeView({

    dragAndDrop: true,

    dataSource: [

            { text: "Datagrid", data: { id: 'datagrid' }, expanded: true, items: [

                { text: "Simple Datagrid", data: { id: 'datagrid_simple' } },

                { text: "Column Setting", data: { id: 'datagrid_column' } },

                { text: "Search Item", data: { id: 'datagrid_search' } },

                { text: "Action Button", data: { id: 'datagrid_action' } },

                { text: "Method", data: { id: 'datagrid_method' } }

            ]},

            { text: "About API", data: { id: 'credit' } }

        ],

    select: function(e) {

        console.log(TreeNodeText(e.node));

        console.log(TreeNodeData(e.node));

    }

});

I hope this help you..

Regards, Zeke

[Alex Gyoshev]

Hello Zeke,

Thank you for sharing your solution -- you have been awarded Telerik points for your effort. We intend to allow binding to the DataSource component for the release in March, which will let you simplify your code.

Kind regards,
Alex Gyoshev
the Telerik team

[Zeke]

Thank you alex, I'll wait for that day.. :)

[Adriano]

Is this ready? Tnks!

[Alex Gyoshev]

Hello Adriano,

The release is expected to ship by the end of this week. It will contain the integration of TreeView templates that will allow you to render the associated data where you wish, like so:

$("#treeview").kendoTreeView({
    template: "#= item.text #<input type='hidden' class='data-id' value='# item.id #' />"
});

We have decided not to ship the hierarchical DataSource in this release. We did a lot of research about the problem and since we intend to make the component as flexible as it should be, we figured that it will be wiser to spend more time on it instead of delivering a half-baked solution and introducing breaking changes soon afterwards.

Regards,
Alex Gyoshev
the Telerik team

[Kyle]

The example you provided shows how to use the id within a template, but what if we wanted access to the id from a method? (such as the select method?

I tried both the following:

        function onTreeViewSelect(e)
        {
//            console.log($(e.node).find('.k-in:first').id());
            console.log($(e.node).find('.k-in:first').id);
}

And neither worked.
Thanks.

[Keith]

Kyle:

The example posted has a subtle bug in it that stops the ID being set on the hidden input. It is:

value='# item.id #'

but should be:

value='#= item.id #'

Once this is in place the actual value of the hidden input it set.
From there you can use the following to retrieve the id:

$(e.node).find('.data-id').val();

An alternate if you want to use the actual data-id attribute is to create the template as follows:

"#= item.text # <input type='hidden' data-id='#= item.id #' class='item-id' />"

and then retrieve the id with:

$(e.node).find(".item-id").data("id");

[Kyle]

Thanks Keith, that worked like a charm!

For anyone else who is interested, you can use more than id. For example, I also added a type by using the template:

template: "#= item.text #<input type='hidden' class='data-id' value='#= item.id #' /><input type='hidden' class='data-type' value='#= item.type #' />"

Now on the onSelected function I was able to do both:

            console.log($(e.node).find('.data-id').val());<br>            console.log($(e.node).find('.data-type').val());

[Vincent]

Kyle and Keith!
Thanks for sorting this options out. Template can be customized now!

[TrentCioran]

Hello All,

I tried what Kyle did but the treeview is not taking the template, I have a running sample here. Am I doing something wrong or the version is not the correct? 


Thanks in advance,
Manuel

[TrentCioran]

Got resolved, TreeView does not take the template once it has rendered the control. If I send the data at initialization time it takes the template as expected.

Here a question for the KendoUI Team: Is this by design or a bug?


Thanks!

[Osman]

Hi all;

I want to bind my data to treeview. You told that with Json it is possible. Is there any example code about treeview with Json binding ? (a complete example would be great)

Thanks

[Kyle]

Hey Osman,
Are you looking to bind to remote json data? My understanding is that this is not yet currently possible:

http://www.kendoui.com/forums/ui/treeview/remote-datasource-for-treeview.aspx

[Osman]

Hi Kyle ;

The link that you sent is posted on January. I wonder are there any changes happened since January?

Thanx.

[Keith]

According to the documentation it's not possible to bind to a remote or local data source just yet: http://www.kendoui.com/documentation/ui-widgets/treeview/overview.aspx.

In saying that you can still bind to a json object that you retrieve dynamically using this example: http://www.kendoui.com/forums/ui/treeview/remote-datasource-for-treeview.aspx. It could be wrapped in a nice helper function and use templates to clean it up a bit but it does what's needed.

Also, it is nice to use data sources when possible (it's one of the main reasons I want to use Kendo UI) so if you really want to do this you can do the following:

1. Retrieve the hierarchical json data.
2. Bind this json data to the tree using something like the link given above.
3. Flatten the json data so it's one dimensional and bind it to a data source.

I know it's not that clean and causes a disconnect between the actual tree data and the data source but by being careful to keep both in sync with each other it's very functional. Plus as far as I know a hierarchical data source is being added to the next version so this (or any other examples from people) should hopefully just be temporary workarounds.

[Jamie]

I just tried using the new template feature to add an id field.  Worked like a charm.  That is until I started using append().  In which case it didn't work.  Is there something special I have to do to apply the template when using the append() method?

[Catalin]

Thanks Keith and Alex for the hints.. they helped me on Id of node when clicked on tree and pass it as parameter to grid!