DHTMLX Docs & Samples Explorer

### Setting Cells AutoSize

Please, select the cells which will be autosized in the process of resizing
Autosize: HOR
VER
Source

    <link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxlayout.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxWindows/codebase/dhtmlxwindows.css">
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxlayout.js"></script>
    <script src="../../../dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
    <script src="../../../dhtmlxWindows/codebase/engine/dhtmlxwindows_enginedhx.js"></script>
    <script src="../../codebase/dhtmlxcontainer.js"></script>

    <div id="winVP" style="position: relative; height: 500px; border: #cecece 1px solid; margin: 10px;"> </div>
    <div id="srcDiv" style="position: relative; left: 20px; width: 600px;"></div>
    <div style="position: relative; margin-top: 20px; left: 20px; width: 600px;">Please, select the cells which will be autosized in the process of resizing</div>
    <div id="viewDiv" style="position: relative; margin-top: 20px; left: 20px; width: 600px;">
        Autosize: HOR <select id="sel1"></select> VER <select id="sel2"></select> <input type="button" value="Apply" onclick="setAutoSize();">
    </div>
    <script>var dhxWins,
    dhxLayout;
    var sel1 = document.getElementById("sel1");
    var sel2 = document.getElementById("sel2");
    function doOnLoad() {
        dhxWins = new dhtmlXWindows();
        dhxWins.enableAutoViewport(false);
        dhxWins.attachViewportTo("winVP");
        dhxWins.setImagePath("../../../dhtmlxWindows/codebase/imgs/");
        dhxWins.createWindow("w1", 20, 30, 600, 400);
        loadView("3L");
        var views = dhxLayout.listViews();
        var table = document.createElement("TABLE");
        document.getElementById("srcDiv").appendChild(table);
        var tbody = document.createElement("TBODY");
        table.appendChild(tbody);
        var tr1 = document.createElement("TR");
        tbody.appendChild(tr1);
        var tr2 = document.createElement("TR");
        tbody.appendChild(tr2);
        for (var q = 0; q < views.length; q++) {
            var td1 = document.createElement("TD");
            var td2 = document.createElement("TD");
            td1.innerHTML = views[q];
            td2.innerHTML = "<img src='../common/imgs/" + String(views[q]).toLowerCase() + ".bmp' style='height: 49px; width: 49px; cursor: pointer;' onclick='loadView(\"" + views[q] + "\");'>";
            tr1.appendChild(td1);
            tr2.appendChild(td2);
        }
    }
    function loadView(view) {
        if (dhxLayout != null)
            dhxLayout.unload();
        dhxLayout = dhxWins.window("w1").attachLayout(view);
        //;
        var asData = dhxLayout.listAutoSizes();
        sel1.options.length = 0;
        var selected = 0;
        for (var q = 0; q < asData[2].length; q++) {
            if (asData[2][q] == asData[0]) {
                selected = q;
            }
            sel1.options.add(new Option(asData[2][q].replace(/;/g, " "), asData[2][q]));
        }
        sel1.selectedIndex = selected;
        sel2.options.length = 0;
        var selected = 0;
        for (var q = 0; q < asData[3].length; q++) {
            if (asData[3][q] == asData[1]) {
                selected = q;
            }
            sel2.options.add(new Option(asData[3][q].replace(/;/g, " "), asData[3][q]));
        }
        sel2.selectedIndex = selected;
    }
    function setAutoSize() {
        var sel1 = document.getElementById("sel1");
        var as1 = sel1.options[sel1.selectedIndex].value;
        var sel2 = document.getElementById("sel2");
        var as2 = sel2.options[sel2.selectedIndex].value;
        //;
        dhxLayout.setAutoSize(as1, as2);
    }</script>