getItemValue odd behaviour.

[Nick]

I have a treeview that I'm dynamically loading the child nodes for using Ajax (the parent level is via a server side model pased to the view). This works fine. I've registered an event on the OnSelect using the ClientSide event registration in the view, this also fires fine. In this event handler I'm trying to load a div dynamically using the value of the item selected, this I can't figure out. I've checked the demo's and the documentation for the API but I can't get a consistent answer. All the example seem to use what looks like a data key of tTreeView. Where did this come from? I tried to replicate the demo's but I couldn't. So I started trial and error using Chrome's javascript console when the onSelect event was fired to try and hack my way through it. I have what "technically" works but I don't see why.

My event registration looks like this

.ClientEvents(e =>e.OnSelect(@<text>function(e) { alert($(this).data().getItemValue(e.item));}</text>))

This gives an error when I select a node. I've tried passing a value into the data() function but nothing seems to get me anywhere closer to finding a definition of getItemValue. However, when I click on a node, if I break into the javascript console and run this first my code works.
$(this).data(this);
I don't even have to do it for every call, I just called it once on the page and then the page works fine with my existing code until I reload the page, even child nodes that are populated after the call is made. I tried combining the two but It doesn't work. I found that it's not the return value of the .data(this) function that works it's the effect it has on calling .data() afterwards that it alters.

Doesn't work

alert($(this).data().getItemValue(e.Item));

Doesn't Work

alert($(this).data(this).getItemValue(e.Item));

Doesn't work

var test = $(this).data(this)
alert(test.getItemValue(e.Item));

Works

$(this).data(this);
alert($(this).data().getItemValue(e.Item));

How are the examples on the documentation and demo sites supposed to work? Cause while I found that my code above does the trick I have a funny feeling it won't work so well for multiple treeviews on one page.

Oh and I'm using 2011.2.712.340

[Georgi Tunev]

Hi Nick,

Generally speaking, the treeview client object is referred like this:

var treeview = $("#MyTreeView").data("tTreeView");

where MyTreeview is the component's Name. Same holds true for every other extension in the suite.

Now in client events like OnLoad / OnCollapse / OnChecked etc., the client object can be referred like this (code taken from the OnExpand sample in the documentation):

<script type="text/javascript">
function TreeView_onExpand(e) {
    //`this` is the DOM element of the treeview
    var treeview = $(this).data('tTreeView');

    var nodeElement = e.item;

    //event handling code
}

While working on your ticket however, I noticed that this doesn't hold true in the OnSelect event. We will investigate further and improve the code, however for the time being, I suggest to refer the treeview object as shown in the beginning of my reply (var treeview = $("#MyTreeView").data("tTreeView");). I also updated your points for bringing this problem to our attention.

In addition, since JavaScript is case-sensitive, you will also need to replace "e.Item" in your code with
"e.item"

Greetings,
Georgi Tunev
the Telerik team

[Nick]

Ahh ok. I think I got preoccupied with the [this] object because it made sense for it to be what I was looking for. However after trying your suggestion of using the explicit name of the control specified in the view, and looking at the code I had come up with the other day I noticed that these two blocks of code achieve the same thing. In fact doing an equate comparison indicates they are in fact the same.

$("#LineItemsByType").data("tTreeView").getItemValue(e.item)

this.getItemValue(e.item)

this === $("#LineItemsByType").data("tTreeView")

Are there any implications of simply using this.getItemValue(e.item), or is this something not guaranteed to work in future versions? Everyone loves shorter code, especially with javascript :-)

[Georgi Tunev]

Hi again Nick,

Yes, that's exactly the problem with the OnSelect event - unlike the other events, it returns the DOM object ($("#LineItemsByType").data("tTreeView")), while it should return only the element (this). We will fix that in one of the following updates, so it is best for now to use "$("#LineItemsByType").data("tTreeView")".


Kind regards,
Georgi Tunev
the Telerik team