This is a migrated thread and some comments may be shown as answers.

ID field for nodes loaded from data source

24 Answers 944 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Jacob
Top achievements
Rank 1
Jacob asked on 17 Oct 2011, 09:09 AM
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

24 Answers, 1 is accepted

Sort by
0
Jacob
Top achievements
Rank 1
answered on 17 Oct 2011, 09:17 AM
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.
0
Alex Gyoshev
Telerik team
answered on 17 Oct 2011, 01:59 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jacob
Top achievements
Rank 1
answered on 17 Oct 2011, 02:05 PM
Thanks for your answer, Alex!

Any idea if this is going to make it into 1.0 in late 2011?
0
Alex Gyoshev
Telerik team
answered on 18 Oct 2011, 09:06 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Arun
Top achievements
Rank 1
answered on 19 Nov 2011, 07:50 AM
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...
0
Mike
Top achievements
Rank 1
answered on 20 Dec 2011, 11:42 PM
I'd just like to put in my two cents that I feel that this is a critical feature for this component.
0
Alex Gyoshev
Telerik team
answered on 21 Dec 2011, 09:15 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Zeke
Top achievements
Rank 1
answered on 02 Jan 2012, 03:37 PM
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
0
Alex Gyoshev
Telerik team
answered on 03 Jan 2012, 05:23 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Zeke
Top achievements
Rank 1
answered on 04 Jan 2012, 10:03 AM
Thank you alex, I'll wait for that day.. :)
0
Adriano
Top achievements
Rank 1
answered on 16 Mar 2012, 07:57 PM
Is this ready? Tnks!
0
Alex Gyoshev
Telerik team
answered on 19 Mar 2012, 10:21 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kyle
Top achievements
Rank 1
answered on 02 Apr 2012, 06:34 PM
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.
0
Keith
Top achievements
Rank 1
answered on 03 Apr 2012, 04:47 AM
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");

0
Kyle
Top achievements
Rank 1
answered on 03 Apr 2012, 01:52 PM
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());
0
Vincent
Top achievements
Rank 1
answered on 05 Apr 2012, 09:57 AM
Kyle and Keith!
Thanks for sorting this options out. Template can be customized now!
0
TrentCioran
Top achievements
Rank 1
answered on 07 Apr 2012, 02:24 AM
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
0
TrentCioran
Top achievements
Rank 1
answered on 07 Apr 2012, 04:41 PM
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!
0
Osman
Top achievements
Rank 1
answered on 09 Apr 2012, 12:33 PM
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
0
Kyle
Top achievements
Rank 1
answered on 09 Apr 2012, 01:11 PM
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
0
Osman
Top achievements
Rank 1
answered on 09 Apr 2012, 01:29 PM
Hi Kyle ;

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

Thanx.
0
Keith
Top achievements
Rank 1
answered on 09 Apr 2012, 03:34 PM
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.
0
Jamie
Top achievements
Rank 1
answered on 30 Apr 2012, 01:20 AM
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?
0
Catalin
Top achievements
Rank 1
answered on 26 Oct 2012, 11:00 AM
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!
Tags
TreeView
Asked by
Jacob
Top achievements
Rank 1
Answers by
Jacob
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Arun
Top achievements
Rank 1
Mike
Top achievements
Rank 1
Zeke
Top achievements
Rank 1
Adriano
Top achievements
Rank 1
Kyle
Top achievements
Rank 1
Keith
Top achievements
Rank 1
Vincent
Top achievements
Rank 1
TrentCioran
Top achievements
Rank 1
Osman
Top achievements
Rank 1
Jamie
Top achievements
Rank 1
Catalin
Top achievements
Rank 1
Share this question
or