Dynamic resizing and adjustment

Problem

How to change sizes of DHTMLX Touch components dynamically?

Solution

For dynamic resizing app elements, DHTMLX Touch offers the method resize(). When you change size of some element and call this method, all child and parent containers of the calling element will adjust to his new size.

$$('mygrid').define("width", 300);
$$('mygrid').resize();

Related sample: 04_list/16_resizing.html

In some situations you may need to adjust an element to the size of the outer parent HTML container. In such the situation you may use the method adjust() instead of resize():

document.getElementById('container_b').style.height="100px";
$$('mylist').adjust();

Related sample: 04_list/17_resizing_and_adjustment.html

Tip 1

One and the same effect can be achieved by using the resize() and adjust() methods.
For example, you have a list that is placed into a <div> container, named as 'box'. The initial height of the list is 50 px. You want to increase it to 100 px. Possible solutions can look as shown in the table below:

From child to parent From parent to child
$$('mylist').define("height", 100);
$$('mylist').resize();
document.getElementById('box').style.height="100px";
$$('mylist').adjust();

Related sample: 04_list/17_resizing_and_adjustment.html

Tip 2

The method resize() can take the value true as the parameter. When can it be useful for you?

Let's consider a simple example: you want to resize several elements which are placed into some common container.
In this case, the method resize() can be used in 2 ways:

  1. You can assign a new size and call resize() for each of these elements:

    $$('list1').define("width", 300);
    $$('list1').resize();
    $$('list2').define("width", 100);
    $$('list2').resize();
    ...
  2. Or you can assign new sizes for all these elements and call resize(true) just for their common parent container.

    $$('list1').define("width", 300);
    $$('list2').define("width", 100);
    ...
    $$('layout_id').resize(true);

The difference in usage can be simply explained: when you call resize() without parameters it checks whether the size of the calling component was redefined and if it was - redraws elements, otherwise - keeps elements as they are. When you call resize(true), app elements are redrawn even if the size of the calling component wasn't changed.

Related sample: 04_list/16_resizing.html