Split containers

Use data-split to generate split bar. By default it will add right vertical split bar near container. Add style="width/height:...px; for initial width/height. Split control will store last position of split bar in browser localstorage.

In order to show/hide split bar and it's container attribute id="splitBar.." have to be provided. Then split control method spliBar.toggleBar() can be used in javascript.

Note: When using split control make sure that parent container has only 2 childs (containers).

  • List
  • Only
  • For
  • Container
  • To
  • Be
  • Bigger
Center Container

Adding style="background:white" will make center container not transperent.

Orientation

By default it will add right vertical split bar. Use data-split="left" to have left vertical split bar. Use data-split="bottom" to have bottom horizontal bar.

Use data-split-maxheight/maxwidth/minheight/minwidth="..." to define boundaries for container. Value should be in px.

Center Container
  • Yet onther
  • list
  • for
  • height
  • List
  • Only
  • For
  • Container
  • To
  • Be
  • Bigger

Integration with data grid2

If there is data-grid2 inside container it will handle grid size separately. You can use method splitID.toggleFullSplit() to show grid full height and hide bottom container.

Left container

Name Genre Established

Aditional

  • splitID.setWindowHeight = true to use window height instead of parent container height. It is useful for full window height applications.
  • splitID.attachEvent("onSplitResized",function(pSize){...}); to attach container resize event. It will return container new width or height depending on vertical or horizontal bar is used.