{"id":2487,"date":"2014-10-14T18:57:41","date_gmt":"2014-10-14T14:57:41","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2487"},"modified":"2023-05-05T13:57:34","modified_gmt":"2023-05-05T10:57:34","slug":"creating-custom-buttons","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/creating-custom-buttons\/","title":{"rendered":"DHTMLX Little-Known Features: Creating Custom Buttons"},"content":{"rendered":"<p>Our weekly blog section is complemented with another cool feature that is available in our JavaScript UI library <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/\" target=\"_blank\">dhtmlxSuite<\/a> &#8211; you can add a <a href=\"https:\/\/docs.dhtmlx.com\/windows__creating_custom_buttons.html\" target=\"_blank\">custom button to a window<\/a>. It is simple and understandable as always.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2014\/10\/custom_buttons.png\" alt=\"custom-buttons\" width=\"498\" height=\"347\" class=\"aligncenter size-full wp-image-2488\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2014\/10\/custom_buttons.png 498w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2014\/10\/custom_buttons-300x209.png 300w\" sizes=\"auto, (max-width: 498px) 100vw, 498px\" \/><\/p>\n<p>To add the custom button, you need to use the <a href=\"https:\/\/docs.dhtmlx.com\/api__dhtmlxwindowscell_adduserbutton.html\" target=\"_blank\">addUserButton()<\/a> method:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">myWins.<span class=\"me1\">window<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span>.<span class=\"me1\">addUserButton<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> position<span class=\"sy0\">,<\/span> tooltip<span class=\"sy0\">,<\/span> name<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>There can be taken the following parameters:<\/p>\n<ul>\n<li>id &#8211; id of the created button;<\/li>\n<li>position &#8211; this parameter that specifies where does the button place on the caption bar (left to right: 0 &#8211; the first button, 1 &#8211; the second, etc; there are some standard buttons that are hidden by default,  for example \u201chelp\u201d or \u201cstick\u201d);<\/li>\n<li>tooltip &#8211; when the user hovers the mouse over the created button, the title that is set by this parameter will appear;<\/li>\n<li>name &#8211; the name given to the button (using this parameter, you can work with this button and create CSS stule for it).<\/li>\n<\/ul>\n<p><\/br><\/p>\n<p>What else can be done with custom buttons?<\/p>\n<p><!--more--><br \/>\n<strong>You can add an event to the button<\/strong><\/p>\n<p>You can easily attach an event to the custom button in the following way:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">var<\/span> evId <span class=\"sy0\">=<\/span> myWins.<span class=\"me1\">window<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span>.<span class=\"me1\">button<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span>.<span class=\"me1\">attachEvent<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;onClick&quot;<\/span><span class=\"sy0\">,<\/span> handler<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>And if needed remove an event from the user-created button:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">myWins.<span class=\"me1\">window<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span>.<span class=\"me1\">button<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span>.<span class=\"me1\">detachEvent<\/span><span class=\"br0\">&#40;<\/span>evId<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><\/br><br \/>\n<strong>You can operate with the button<\/strong><\/p>\n<p>Your created buttons can also be operated through the default button methods. There are lots of possibilities: you can attach\/detach\/return the context menu (shown on the screenshot above), enable\/disable the button, hide\/show a button, set custom css style for a button, and other.<\/p>\n<p>Check the full list of methods: <a href=\"https:\/\/docs.dhtmlx.com\/api__refs__dhtmlxwindowsbutton.html\" target=\"_blank\">dhtmlXWindowsButton API<\/a>.<br \/>\n<\/br><br \/>\n<strong>And surely you can remove the button<\/strong><\/p>\n<p>Remove you custom button with the help of the method <a href=\"https:\/\/docs.dhtmlx.com\/api__dhtmlxwindowscell_removeuserbutton.html\" target=\"_blank\">removeUserButton()<\/a>:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">myWins.<span class=\"me1\">window<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span>.<span class=\"me1\">removeUserButton<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Check the related <a href=\"https:\/\/docs.dhtmlx.com\/windows__creating_custom_buttons.html\" target=\"_blank\">documentation<\/a>. See you next week!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our weekly blog section is complemented with another cool feature that is available in our JavaScript UI library dhtmlxSuite &#8211; you can add a custom button to a window. &#8230;<\/p>\n","protected":false},"author":2,"featured_media":3321,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1],"tags":[33,43,14],"class_list":["post-2487","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","tag-all-posts","tag-dhtmlx-tips","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2487"}],"version-history":[{"count":1,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2487\/revisions"}],"predecessor-version":[{"id":11413,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2487\/revisions\/11413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3321"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}