{"id":2776,"date":"2015-04-08T14:41:54","date_gmt":"2015-04-08T10:41:54","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2776"},"modified":"2025-05-19T14:57:15","modified_gmt":"2025-05-19T11:57:15","slug":"dhtmlxsuite-4-2-dhtmlxsidebar","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxsuite-4-2-dhtmlxsidebar\/","title":{"rendered":"Meet dhtmlxSuite 4.2 with New Component &#8211; dhtmlxSidebar"},"content":{"rendered":"<p>We are excited to announce the update of our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/\" target=\"_blank\">JavaScript widget library<\/a> &#8211; DHTMLX Suite. This update is directed to enhance the functionality of the library by fixing the known bugs and making other improvements. We didn&#8217;t add lots of new features to the existing components, but we would like to present a new widget &#8211; dhtmlxSidebar.<\/p>\n<p><strong>JavaScript Sidebar Navigation Menu<\/strong><\/p>\n<p>Our new <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSidebar\/\" target=\"_blank\">JavaScript sidebar component<\/a> represents a nice vertical navigation menu. Any items can be placed in Sidebar on the left side and any DHTMLX components can be attached on the right.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/javascript-menu1.png\" alt=\"javascript navigation menu\" width=\"600\" height=\"400\" class=\"aligncenter size-full wp-image-2780\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/javascript-menu1.png 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/javascript-menu1-300x200.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><br \/>\n<!--more--><br \/>\nThe look of dhtmlxSidebar can be customized with 5 predefined templates and 3 built-in skins (skyblue, web, terrace). Apart from the default options, you can create you own custom template &#8211; we&#8217;ve already prepared a detailed instruction for you in <a href=\"https:\/\/docs.dhtmlx.com\/sidebar__index.html\" target=\"_blank\">our docs<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/custom-terrace.png\" alt=\"custom template in sidebar\" width=\"600\" height=\"401\" class=\"aligncenter size-full wp-image-2781\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/custom-terrace.png 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/custom-terrace-300x200.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>dhtmlxSidebar has some basic functionality now, and we hope that you will help us with its further development by feature requests and suggestions. We&#8217;ll gladly review all of them.<\/p>\n<p><strong>New feature in full-screen mode of DHTMLX container components<\/strong><\/p>\n<p>Since 4.2, we use a common full-screen init technology for all container components to attach header, footer, menu, toolbar, status bar to the component&#8217;s top. From now you can init any container component in a full-screen mode directly, no need in adding an extra layer with layout. <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxAccordion\/samples\/05_components\/inc\/header_footer_with_menu.html\" target=\"_blank\">Check the demo<\/a>.<\/p>\n<p><strong>Integration of popup and menu with Google Maps marker<\/strong><\/p>\n<p>We&#8217;ve added two samples that show you how <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxPopup\/\" target=\"_blank\">dhtmlxPopup<\/a> and <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxMenu\/\" target=\"_blank\">dhtmlxMenu<\/a> can be pinned on Google map marker. Almost any DHTMLX component can be inserted in dhtmlxPopup, so you can display different kind of information for the user when he clicks on the marker.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/popup.png\" alt=\"google maps marker with popup\" width=\"599\" height=\"400\" class=\"aligncenter size-full wp-image-2783\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/popup.png 599w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/popup-300x200.png 300w\" sizes=\"auto, (max-width: 599px) 100vw, 599px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/menu-google-marker.png\" alt=\"google map marker with menu\" width=\"599\" height=\"401\" class=\"aligncenter size-full wp-image-2782\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/menu-google-marker.png 599w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/menu-google-marker-300x200.png 300w\" sizes=\"auto, (max-width: 599px) 100vw, 599px\" \/><\/p>\n<p><strong>Checkboxes in multicolumn combo<\/strong><\/p>\n<p>By multiple requests, we&#8217;ve added the ability to use checkboxes in multocolumn mode which is used for more convenient representation of data in <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxCombo\/\" target=\"_blank\">dhtmlxCombo<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/checkboxes-multicolumn.png\" alt=\"checkboxes in multicolumn combo\" width=\"561\" height=\"261\" class=\"aligncenter size-full wp-image-2784\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/checkboxes-multicolumn.png 561w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2015\/04\/checkboxes-multicolumn-300x139.png 300w\" sizes=\"auto, (max-width: 561px) 100vw, 561px\" \/><\/p>\n<p>Due to many feedbacks and users&#8217; suggestions we&#8217;ll be able to fix many problems and improve DHTMLX components. <\/p>\n<p>You may find the full what&#8217;s new list in our <a href=\"https:\/\/docs.dhtmlx.com\/dhx4_whats_new.html\" target=\"_blank\">documentation<\/a>.<\/p>\n<p>Download the <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/\" target=\"_blank\">Standard Edition<\/a> or <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/download.shtml\" target=\"_blank\">try the Suite PRO Edition<\/a>.<\/p>\n<p>PRO users with active support subscription will receive a newsletter with the download link to the updated product.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are excited to announce the update of our JavaScript widget library &#8211; DHTMLX Suite. This update is directed to enhance the functionality of the library by fixing the &#8230;<\/p>\n","protected":false},"author":2,"featured_media":3303,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,70,1,38],"tags":[33,10,4],"class_list":["post-2776","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-releases","category-uncategorized","category-visible","tag-all-posts","tag-dhtmlxsuite","tag-dhtmlx-updates"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2776","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=2776"}],"version-history":[{"count":4,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2776\/revisions"}],"predecessor-version":[{"id":13932,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2776\/revisions\/13932"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3303"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}