{"id":2558,"date":"2014-11-17T15:56:31","date_gmt":"2014-11-17T11:56:31","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2558"},"modified":"2025-05-19T15:01:35","modified_gmt":"2025-05-19T12:01:35","slug":"new-dhtmlx-component","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/new-dhtmlx-component\/","title":{"rendered":"New DHTMLX component! Try it now and influence on future development"},"content":{"rendered":"<p>We are very excited to present a new DHTMLX component that later on will be included in the DHTMLX <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/\" target=\"_blank\">JavaScript widget library<\/a>. This component represents a layout with the possibility to drag-and-drop its cells.<\/p>\n<p>So, meet dhtmlxPortal!<\/p>\n<p>We want you to try the beta-version of this new JavaScript UI component and tell us about your experience. What should you know about it before trying?<\/p>\n<p>dhtmlxPortal provides you the ability to re-order the cells in the layout at any time without the  necessity of coding. You just drag the cell and drop it to the needed position.<\/p>\n<p>As well as <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxLayout\/\" target=\"_blank\">dhtmlxLayout<\/a>, dhtmlxPortal provides a set of build-in patterns that are set on the init stage.<\/p>\n<p><strong>Two types of drag and drop<\/strong><\/p>\n<ul>\n<li>Live Drop &#8211; in this mode while dragging the item, you see its &#8220;preview&#8221; at the place of future drop.<\/li>\n<li>Markers &#8211; in this case possible positions for dropping are highlighted during the dragging.<\/li>\n<\/ul>\n<p><\/br><br \/>\n<a href=\"https:\/\/dhtmlx.com\/x\/download\/regular\/demos\/dhtmlxPortal\/live_demo.html\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2014\/11\/skyblue-drag-layout-2.png\" alt=\"dhtmlxPortal\" width=\"600\" height=\"392\" title=\"Click to open the live demo\" class=\"aligncenter size-full wp-image-2568\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2014\/11\/skyblue-drag-layout-2.png 600w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2014\/11\/skyblue-drag-layout-2-300x196.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p align=\"center\" <em>Click to open the live demo<\/em><\/p>\n<p>Moreover, with dhtmlxPortal you have an ability to <strong>add and remove the cells dynamically<\/strong>.<\/p>\n<p>Though the new component is in the beta-version now and it&#8217;s not included in the DHTMLX library yet, it can be easily integrated with other DHTMLX components.<\/p>\n<p>The functionality of dhtmlxPortal can be extended with other useful features. We are very grateful to you for your feedbacks, bug reportings and suggestions. That&#8217;s why we&#8217;d like to introduce this new component to you before the official release and before making it a part of the dhtmlxSuite library.<\/p>\n<p>So, please download <a href=\"https:\/\/dhtmlx.com\/x\/download\/regular\/betas\/dhtmlxPortal_beta.zip\" target=\"_blank\">dhtmlxPortal Beta version<\/a>.<\/p>\n<p>Check the <a href=\"https:\/\/dhtmlx.com\/x\/download\/regular\/demos\/dhtmlxPortal\/live_demo.html\" target=\"_blank\">live demo<\/a> that may help you to start working with the component.<\/p>\n<p>Feel free to leave your feedbacks and suggestions in the comments section below, on the <a href=\"https:\/\/forum.dhtmlx.com\/c\/suite\/dhtmlxlayout-windows-accordion-popup-portal\" target=\"_blank\">forum<\/a> or write us at support@dhtmlx.com.<\/p>\n<p>As soon as we collect all the opinions and create a full-featured component, it will be officially included in the new version of dhtmlxSuite.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are very excited to present a new DHTMLX component that later on will be included in the DHTMLX JavaScript widget library. This component represents a layout with the &#8230;<\/p>\n","protected":false},"author":2,"featured_media":3313,"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-2558","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\/2558","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=2558"}],"version-history":[{"count":5,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2558\/revisions"}],"predecessor-version":[{"id":13939,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2558\/revisions\/13939"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3313"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}