Navigate via TreeMapItem

[MO]

After learning about the TreeMap at your webinar, I've been doing a little bit of experimentation. The TreeMap might work well for displaying some aggregate information we want to display on a new website. However... it does not appear that the TreeMap has much in the way of navigation or events, or am I missing something?

The main part of the RadTreeMap has a NavigateUrl property. But the TreeMapItem controls do not appear to have any exposed click events or a NavigateUrl property. So how does Telerik expect one to do drill-through like clicking on the TreeMapItems to go to specific detail pages or trigger events?

I have experimented with several methods to do this but they are a bit of a kludge. So I'm curious how Telerik intended for this to work.

[Peter Filipov]

Hi,

The control supports templates and you could link the every item. Our overview demo shows how you could view details with the help of the RadToolTipManager.
Regarding your suggestion you could log it in our portal with detailed description and vote for them.

Regards,
Peter Filipov
Telerik

[MO]

I'm not sure how popup tooltips are going to allow me to navigate to a new url. I am not able to simply display data, because each of the data elements to be represented in the RadTreeMap are actually aggregates of hundreds (potentially thousands) of lines of detailed data that can be further drilled down into (i.e. navigate to another web page) where the user will make selections. Fortunately, the RadGridView exposes the click event I can use to make that happen.

I just thought the new control looked awesome, but it apparently lacks the same level of functionality. Perhaps I can just attach a javascript click event to redirect to the new url... 

[Peter Filipov]

Hi Matt,

The overview demo shows how to handle mouseover event. As you suggested, you could easily change it to click and implement the navigation functionality. Keep in mind that the templates are the other option.  

Regards,
Peter Filipov
Telerik

[MO]

My apologies, I'm relatively new to web development. I saw your example using the template to do tooltips. But I'm at a loss on how templates, as demonstrated in your demo, will work to provide navigation functionality. Could you explain that please?

Thanks!

[MO]

An additional question: 

I'm not sure this will work for our particular design. We are placing the RadTreeMap controls by creating the control objects in the code behind and adding them to a placeholder, primarily because we don't know how many we are going to need. 

Because of this, will the onClientItemCreated javascript event ever get fired? In tracing, it does not appear so.

[MO]

I'm beginning to understand. So inside the <ClientItemTemplate> I can place an href anchor, for example. 

So how do I differentiate between the different TreeMapItems? Just placing an anchor causes every item, parent headers and all, to have the same link.

I'm doing this in the code behind against dynamically generated RadTreeMaps, so it looks like:

Dim MyTreeMap As RadTreeMap = BuildTreeMap(dtData)     '<--- this method just assigns the datasource and returns the treemap
MyTreeMap.ClientItemTemplate = "<div><a href='mylink.aspx'>#=text#</a></div>"

So now everything has the href to mylink.aspx. How do I tell it not to do this to parent items? How do I differentiate between TreeMapItems so I can assign different links?

 

[Peter Filipov]

Hello Matt,

Please notice in the template demo that the images are only on the items, not on the parent ones. Keep in mind that you could execute javascript in the template like in the demo there is an "if" statement. Also look how the image "scr" attribute is generated.

Regards,
Peter Filipov
Telerik

[MO]

I don't think that is true (that it doesn't affect the headers).

The following code:

tmSummary.ClientItemTemplate = "<div class='treeMapHover'>#=text#</div>"

.treeMapHover:hover { cursor:pointer }

This also shows the pointer cursor over the headers. I tried to create an image to show it, but the windows print screen leaves out the cursor. I do, however, note that your tooltip code does NOT extend to the parent header... hmmm.

[MO]

So I was able to use js to attach events. Some notes for other users who might read this and wonder how:

function onClientItemCreated(sender, args) {
            var toolTipValue = args.get_dataItem().value;
            var itemElement = args.get_element();
            
            $(itemElement).on("mouseover", function (e) {
                showToolTip(toolTipValue, itemElement);       <----- this is the tooltip stuff from the demo above. very useful

                if ($(itemElement).hasClass("k-leaf")) {      <-------- VERY IMPORTANT! cssclass "k-leaf" is not present on headers
                    if (CheckForRef(args) == true) { $(itemElement).context.style.cursor = 'pointer'; }
                }    <------ what I've done here is check for certain data and return true if will be a ref link, and then change cursor 
            });                   this way if the TreeMapItem will have a NavigateTo (see below), the cursor changes to show the link cursor

            if (itemElement.addEventListener && $(itemElement).hasClass("k-leaf")) {  <----- k-leaf again makes sure I skip headers!
                itemElement.addEventListener("click", NavigateTo, false);     <--- this is where I send to a function that does a redirect
            } else {
                itemElement.attachEvent('onclick', NavigateTo);
            }
        }

[MO]

How does NavigateTo work?

function NavigateTo(sender, args) {
            var itemText = sender.srcElement.innerText;
            var newurl = "";

            if (itemText != null) {
                if (itemText.indexOf("NewProvision") >= 0) {   <----- I check for the data I want, and if present, I tell it a url and set cursor
                    document.body.style.cursor = 'wait';
                    newurl = "MatchValidations.aspx";
                } else if (itemText.indexOf("NearMatch") >= 0) {
                    document.body.style.cursor = 'wait';
                    newurl = "MatchValidations.aspx";
                } else if (itemText.indexOf("Match") >= 0) {
                    document.body.style.cursor = 'wait';
                    newurl = "MatchValidations.aspx";
                }
            } else {
                newurl = "";
            }

            if (newurl != "") {    <---- if the data is right and I create a url then I sent to location, else I skip and nothing happens. 
                window.location.href = newurl
            }
        }

This is why on I checked for the data before changing the mouse pointer to "pointer" in the OnClientItemCreated function. If there is no data, clicking won't link to a new page. But if the data is present, then I want the cursor to change so the user knows that if he clicks there it will go to a new page.