Grid in a Layout not auto resizing with scrollbars


I have a layout in which I have attached a grid using attachObject (not attachGrid). I cannot use attachGrid because of certain reasons.

In layout panel, I will be attaching 2 things

  1. a div tag representing a toolbar (not a dhtmlx component)
  2. a dhtmlxgrid is attached below the toolbar and this is done using attachObject
    2a) we are achieving the above by having a container div tag, which houses 2 divs - 1 for toolbar, another for grid.
  3. On panel resize event, we are calling grid.setSizes.

The problem is that whenever panel is resized, the grid is not auto resized. For e.g., if the panel height is reduced, we expect the grid to be displaying vertical scrollbar. But that is not happening.

Interestingly, if I remove the first div tag (the one for toolbar), the grid auto resizes properly. Please let us know if there is a way to make this work.

I have attached a code snippet for you to replicate this problem. To make the code snippet simple enough, instead of a toolbar I have a simple div tag with “hello world” text. (732 KB)


setSizes() adjusts the grid size to sizes of its parent container. attachObject doesn’t manage sizes of grid container. Therefore, you need to do this manually:


toolbar will be displayed here


myLayout.attachEvent("onPanelResizeFinish", function(){ window.setTimeout(function(){ var height = myLayout.cells("a").offsetHeight; = height-50+"px"; gridOne.setSizes(); },1); });

Thanks Alexandra. I tried the change you had suggested. It is working in Firefox but not in IE8.