{"id":2467,"date":"2014-09-30T17:58:30","date_gmt":"2014-09-30T13:58:30","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2467"},"modified":"2023-05-05T13:58:27","modified_gmt":"2023-05-05T10:58:27","slug":"docking-undocking-cells","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/docking-undocking-cells\/","title":{"rendered":"DHTMLX Little-Known Features: Docking \/ Undocking Cells"},"content":{"rendered":"

We continue to share the small tips that simplify the development process. This week we will discover a possibility to dock\/undock cells. This feature is available in dhtmlxLayout<\/a> and dhtmlxAccordion<\/a>.<\/p>\n

Each cell of the accordion and layout can be docked or undocked<\/a>. Let\u2019s see how it can be achieved and how it looks like.<\/p>\n

By default, all the cells are docked:<\/p>\n

\"cells-docked\"<\/p>\n

When we undock the cell, it becomes taken out of the component and displayed in a separate window.<\/p>\n

\"cells-undocked\"<\/p>\n

To undock a cell, use the undock<\/a> method (we take the layout as an example):<\/p>\n

myLayout.cells<\/span>(<\/span>id)<\/span>.undock<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

If you want to dock this cell back, use the dock<\/a> method:<\/p>\n

myLayout.cells<\/span>(<\/span>id)<\/span>.dock<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

You have also the possibility to operate with the window when the cell is undocked:<\/p>\n

myLayout.dhxWins<\/span>.window<\/span>(<\/span>id)<\/span>.doSome<\/span>(<\/span>...)<\/span>;<\/span><\/div><\/div>\n

The id of the cell and the id of the window are the same.<\/p>\n

Check the related documentation<\/a> and demo<\/a>.<\/p>\n

We can\u2019t call it the most high-demand feature, but our aim is to tell you about all the possibilities that are hidden in our JavaScript UI library. See you next week!<\/p>\n","protected":false},"excerpt":{"rendered":"

We continue to share the small tips that simplify the development process. This week we will discover a possibility to dock\/undock cells. This feature is available in dhtmlxLayout and …<\/p>\n","protected":false},"author":2,"featured_media":3323,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1],"tags":[33,43,14],"class_list":["post-2467","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\/2467","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=2467"}],"version-history":[{"count":1,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2467\/revisions"}],"predecessor-version":[{"id":11414,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2467\/revisions\/11414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3323"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}