jQuery UI Widgets Forums Gauges and Maps TreeMap click to URL

This topic contains 2 replies, has 2 voices, and was last updated by  ToddHaddaway 5 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    click to URL Posts
  • click to URL #76075

    ToddHaddaway
    Participant

    Great widget 🙂

    Is it possible to configure it in such a way as to when the user clicks on a box to take them to a particular URL? I currently have this in my renderCallback section.

                   renderCallbacks: {
                        '*': function (element, value) {
                            if (value.data) {
                                element.jqxTooltip({
                                    content: '<div><div style=\"font-weight: bold; max-width: 200px; font-family: verdana; font-size: 13px;\">' + value.data.title + '</div><div style=\"width: 200px; font-family: verdana; font-size: 12px;\">' + value.data.description + '</div></div>',
                                    position: 'mouse',
                                    autoHideDelay: 6000,
                                    theme: theme
                                });
                            } else if (value.data === undefined) {
                                element.css({
                                    backgroundColor: '#fff',
                                    border: '1px solid #555'
                                });
                            }
                        }
                    },
    

    Thanks!

    click to URL #76086

    Dimitar
    Participant

    Hello ToddHaddaway,

    You can add a click event handler in the renderCallbacks function that redirects the page:

    renderCallbacks: {
        '*': function(element, value) {
            if (value.data) {
                element.jqxTooltip({
                    content: '<div><div style=\"font-weight: bold; max-width: 200px; font-family: verdana; font-size: 13px;\">' + value.data.title + '</div><div style=\"width: 200px; font-family: verdana; font-size: 12px;\">' + value.data.description + '</div></div>',
                    position: 'mouse',
                    autoHideDelay: 6000,
                    theme: theme
                });
            } else if (value.data === undefined) {
                element.css({
                    backgroundColor: '#fff',
                    border: '1px solid #555'
                });
            }
            element.click(function() {
                window.location.href = "http://www.jqwidgets.com/";
            });
        }
    },

    You may also find the following example helpful: https://www.jseditor.io/?key=jqxtreemap-rendercallbacks-example.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    click to URL #76121

    ToddHaddaway
    Participant

    Thanks for the excellent support 🙂

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.