jQuery UI Widgets › Forums › Gauges and Maps › TreeMap › click to URL
Tagged: Angular tree map, jQuery tree map, jqxTreeMap, renderCallbacks, tree map
This topic contains 3 replies, has 3 voices, and was last updated by JackPitterson 3 years, 4 months ago.
-
Authorclick to URL Posts
-
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!
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,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks for the excellent support 🙂
Thanks for info
-
AuthorPosts
You must be logged in to reply to this topic.