Start Building Professional
Web Apps Today

Auto-sizing a grid in layout

I have a grid within an accordion within a layout. What I want to do is have the grid be autosized to whatever size the accordion is, and when the width of the layout cell the accordion is in gets adjusted, for the grid to also re-adjust (hope that makes sense!)

I figured I should be using something like

    mygrid2.selMultiRows = true;
    mygrid2.setImagePath("^CLIENTDIR^dhtmlxGrid/codebase/imgs/");
    mygrid2.setHeader("Available Statistics");

    mygrid2.setInitWidths("240");
    mygrid2.adjustColumnSize(0);

    mygrid2.enableAutoWidth(true, 600, 250);
    mygrid2.setColAlign("left");
    mygrid2.setColTypes("ro");
    //mygrid2.setColSorting("str");
    mygrid2.setColumnColor("white");
    mygrid2.setMultiLine(false);
    mygrid2.enableDragAndDrop(true);
    mygrid2.setSkin(document.getElementById('skin').value);

    mygrid2.init();
    mygrid2.parse(getString(ret[1]));
    
    mygrid2.attachEvent("onDrop",addRemoveStat);
    mygrid2.attachEvent("onDragIn",removeheader);
    mygrid2.attachEvent("onSelectStateChanged",maxRow);


but it doesn't work ?? It just keeps giving me an error that "an object is required" and when I debug, it breaks at:
" this._setColumnSizeR(el._cellIndex, fcolW);this.doOnScroll(0, 1);if (_isOpera)this.setSizes();this.objBuf.childNodes[0].style.width=""};this._setColumnSizeR=function(ind, fcolW){if (fcolW > ((this._drsclmW&&!this._notresize)? (this._drsclmW[ind]||10) : 10)){this.obj.firstChild.firstChild.childNodes[ind].style.width=fcolW+"px";this.hdr.rows[0].childNodes[ind].style.width=fcolW+"px";if (this.ftr)this.ftr.rows[0].childNodes[ind].style.width=fcolW+"px";if (this.cellWidthType == 'px'){this.cellWidthPX[ind]=fcolW}else {var gridWidth = parseInt(this.entBox.offsetWidth);if (this.objBox.scrollHeight > this.objBox.offsetHeight)gridWidth-=(this._scrFix||(_isFF ? 17 : 17));var pcWidth = Math.round(fcolW / gridWidth*100)"

What am I doing wrong?
PS- I have only one column in mygrid2.

Thanks in advance!

Problem caused by adjustColumnSize command, you are calling it in moment when grid's structure not defined yet ( before grid.init ) which cause problem.

By the way , if you are creating grid through attachGrid, then all autosize functionality will be defined automatically, you will need only small adjustment

  mygrid2.enableMultiselect(); // instead of selMultiRows = true; , not a bug, just a more "legal" way 
  mygrid2.setImagePath("^CLIENTDIR^dhtmlxGrid/codebase/imgs/"); 
  mygrid2.setHeader("Available Statistics"); 

  mygrid2.setInitWidths("*"); //take all space
//  mygrid2.adjustColumnSize(0);  not necessary

//  mygrid2.enableAutoWidth(true, 600, 250); not necessary
  mygrid2.setColAlign("left"); 
 ...

Thanks!

What if my grid had 3 columns? Is there a way to maintain a ratio of their widths when the layout is resized?
Also, is it possible to achieve a similar effect if in another cell of my layout, I have a tabbar, and within that there is a grid? So when the layout is resized, the tabbar along with the grid is also resized.

Hope I'm not asking for too much, thanks in advance!

>>What if my grid had 3 columns? Is there a way to maintain a ratio of their widths when the layout is resized?
You have two approaches
 - to have one of them to be autosizable ( * ) - or set all of them in the same manner
           mygrid.setInitWidths("*,*,*");
 - define width in percents
           mygrid.setInitWidthsP("25,25,50");

>>So when the layout is resized, the tabbar along with the grid is also resized.
It tabbar created by attachTabbar - it will reflect cell size. 
If grid created through attachGrid - it will reflect parent cell ( cell of layout or cell of tabbar ) as well. 
http://dhtmlx.com/docs/products/kb/index.shtml?cat=search&page=1&q=5567&ssr=yes&s=miss

Change the order of js files

<script src="^CLIENTDIR^dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>
<script src="^CLIENTDIR^dhtmlxTabbar/codebase/dhtmlxtabbar_wins.js"></script>

any extension, must be included only after main component file, this is rule common for all components