DHTMLX Little-Known Features: Docking / Undocking Cells

| Comments (2)

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 dhtmlxAccordion.

Each cell of the accordion and layout can be docked or undocked. Let’s see how it can be achieved and how it looks like.

By default, all the cells are docked:


When we undock the cell, it becomes taken out of the component and displayed in a separate window.


To undock a cell, use the undock method (we take the layout as an example):


If you want to dock this cell back, use the dock method:


You have also the possibility to operate with the window when the cell is undocked:


The id of the cell and the id of the window are the same.

Check the related documentation and demo.

We can’t 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!


  1. Brian October 12, 2014 at 8:19 pm

    This works very nicely.

    I’ve used this in a full page layout in which the bottom cell ls is an editable grid which spans whole width of the screen.

    Since to top portion of the layout has a lot of other things, I am only able to give out 1/3 of the page height to the bottom grid.

    So just by adding a “Full Screen” button which calls “undock()”, the grid opens in a new windows perfectly.

    These are things which make dhtmlx a great framework. Had I needed to code this by hand it would only eat time. With one function call it was pretty much done.

    • Ivan (DHTMLX team) October 13, 2014 at 3:57 pm

      Thanks for your kind words:)

Leave a Reply