Navigate via TreeMapItem

11 posts, 0 answers
  1. MO
    MO avatar
    23 posts
    Member since:
    Jul 2012

    Posted 30 Oct 2014 Link to this post

    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.

  2. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 31 Oct 2014 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. MO
    MO avatar
    23 posts
    Member since:
    Jul 2012

    Posted 03 Nov 2014 in reply to Peter Filipov Link to this post

    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... 
  5. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 04 Nov 2014 Link to this post

    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
  6. MO
    MO avatar
    23 posts
    Member since:
    Jul 2012

    Posted 04 Nov 2014 Link to this post

    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!

  7. MO
    MO avatar
    23 posts
    Member since:
    Jul 2012

    Posted 04 Nov 2014 Link to this post

    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.
  8. MO
    MO avatar
    23 posts
    Member since:
    Jul 2012

    Posted 04 Nov 2014 Link to this post

    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?

     
  9. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 05 Nov 2014 Link to this post

    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
  10. MO
    MO avatar
    23 posts
    Member since:
    Jul 2012

    Posted 05 Nov 2014 in reply to Peter Filipov Link to this post

    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.
  11. MO
    MO avatar
    23 posts
    Member since:
    Jul 2012

    Posted 05 Nov 2014 Link to this post

    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);
                }
            }
  12. MO
    MO avatar
    23 posts
    Member since:
    Jul 2012

    Posted 05 Nov 2014 in reply to MO Link to this post

    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. 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017