Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by ymikhel on Jun 05, 2008 04:46
open dhtmlx forum
Resizing dynamic columns to fix content width.

Hi,

First - thank you very much for your quick and precise replies to my previous queries.

The current challenge is to make a grid with unspecified column widths (*), which will
be resizable, and will adjust their width according to the content when the table loaded.
I have tried a few ways to do this, and the only thing that worked is resizable columns
when their width specified with numeric value but not "*". But even then adjust didn't work.
In my application architecture the configuration of the table is in XML, and JavaScript is
responsible for table initialization and data loading.

How do I achieve the requirements - dynamic-resizable-content-auto-fit-width columns?

JavaScript:
this.grid = new dhtmlXGridObject("gridContainer"); //gridContainer DIV has width:100% style
this.grid.setImagePath("codebase/imgs/");
this.grid.enableColumnAutoSize(true);
this.grid.setSkin("light");
...
this.grid.parse(xmlDoc);
//this loop was used INSTEAD of "afterInit" XML element (see bellow)
for(var columnIndex = 0; columnIndex < this.grid.getColumnCount(); columnIndex++){
    this.grid.adjustColumnSize(columnIndex);
}

XML:
<?xml version="1.0" encoding="UTF-8"?>
<rows>
    <head>
        <column align="center" id="E_DATE" sort="date" type="ro" width="*"><![CDATA[Date]]></column>
        <column align="center" id="E_CODE" sort="str" type="ro" width="*"><![CDATA[Error Code]]></column>
        <column align="center" id="E_DESC" sort="str" type="ro" width="*"><![CDATA[Description]]></column>
        <column align="center" id="E_REPORTER" sort="str" type="ro" width="*"><![CDATA[Reporter]]></column>
        <column align="center" id="E_SERVER" sort="str" type="ro" width="*"><![CDATA[Server]]></column>
    </head>
    <settings>
        <colwidth>px</colwidth>
    </settings>
    <beforeInit>
        <call command="enableResizing">
            <param>true,true,true,true,true</param>
        </call>
    </beforeInit>
    <!-- This "afterInit" element was used INSTEAD of JS command, no effect -->
    <afterInit>
        <call command="adjustColumnSize">
            <param>0,1,2,3,4</param>
        </call>
    </afterInit>
    <row id="573">
        <cell id="E_CODE"><![CDATA[INFO]]></cell>
        <cell id="E_DATE"><![CDATA[06/05/2008 10:50]]></cell>
        <cell id="E_DESC"><![CDATA[some data]]></cell>
        <cell id="E_REPORTER"><![CDATA[more data]]></cell>
        <cell id="E_SERVER"><![CDATA[even more]]></cell>
    </row>
</rows>

Regards,
Yuri Mikhel
Answer posted by Support on Jun 05, 2008 08:35
About afterInit element
    The call tag is equal to the single js command, so to mimic the same command as in js code you need to have
    <afterInit>
        <call command="adjustColumnSize"><param>0</param></call>
        <call command="adjustColumnSize"><param>1</param></call>
        <call command="adjustColumnSize"><param>2</param></call>
        <call command="adjustColumnSize"><param>3</param></call>
        <call command="adjustColumnSize"><param>4</param></call>
    </afterInit>

>>I have tried a few ways to do this, and the only thing that worked is resizable columns
>>when their width specified with numeric value but not "*".
This is expected behavior, the column marked with "*" can't have fixed size, it always self-adjusted to fill empty space in grid.
If I understood your requirements correctly, you can define only last column as "*" , while for other columns - some fixed width can be defined. On data loading the columns 0-3 will be adjusted to content size, while last column will take all free space in grid.