Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Satprem on Mar 12, 2008 20:34
open dhtmlx forum
DhtmlxGrid init from HTML ,Cookie and Auto column resizing

How to make Auto column resizing and auto save cookie if table init from html ?


<table width="100%" border="1">
<tr>
            <td>
<div id="gridbox" width="100%" height="200px" style="background-color:white;">


<table id="tblToGrid" style="width:100%" imgpath="../imgs/">
<tr>
            <td >Column 1</td>
    <td width="50%">Column 2</td>
     </tr>
        <tr>
            <td>value 11</td>
            <td>value 12</td>
        </tr>
        <tr>
            <td>value 21</td>
            <td>value 22</td>
        </tr>
        <tr>
            <td>value 31</td>
            <td>value 32</td>
        </tr>
        <tr>
            <td>value 41</td>
            <td>value 42</td>
        </tr>
        <tr>
            <td>value 51</td>
            <td>value 52</td>
        </tr>
    </table>


</div>
            </td>
    </tr>
    </table>
<script>

window.onload = new function(){
var mygrid = dhtmlXGridFromTable('tblToGrid');             
}
</script>

<div>
                    <a href="javascript:void(0)" onClick="mygrid.saveSizeToCookie()">Save Width to Cookies</a><br>
                 <a href="javascript:void(0)" onClick="mygrid.loadSizeFromCookie()">Load Width from Cookies</a>
</div>
Answer posted by Support on Mar 13, 2008 01:57
It works nearly the same as in case of normal initialization


window.onload = new function(){
var mygrid = dhtmlXGridFromTable('tblToGrid');             
      mygrid.loadSizeFromCookie(); // load previously save sizes
      mygrid.enableAutoSizeSaving(); // enable size saving after each column resize
}
Answer posted by satprem on Mar 13, 2008 06:20

And what to make Auto column resizing and paginal output  from html table ????

Answer posted by Support on Mar 13, 2008 07:24
The API is the same as in case of  normal loading

var mygrid = dhtmlXGridFromTable('tblToGrid');             
    mygrid.enablePaging(...
    for (var i=0; i<mygrid.getColumnCount(); i++)
        mygrid.adjustColumnSize(i);
Answer posted by satprem on Mar 13, 2008 08:23

cookie perfectly work in an sampe:

<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../imgs/");
mygrid.enableAutoSizeSaving();
mygrid.loadXML("gridH.xml",function(){
mygrid.loadSizeFromCookie();
});
</script>

But does not work in:

window.onload = new function(){
var mygrid = dhtmlXGridFromTable('tblToGrid');             
      mygrid.loadSizeFromCookie(); // load previously save sizes
      mygrid.enableAutoSizeSaving(); // enable size saving after each column resize
}

Where an error?

Answer posted by Support on Mar 13, 2008 09:19
In case of html initialization it is necessary to use cookie name. So, please, try to use the following:

    var mygrid = dhtmlXGridFromTable('tblToGrid');
             
    mygrid.loadSizeFromCookie("sizes");

    mygrid.enableAutoSizeSaving("sizes");

Answer posted by satprem on Mar 13, 2008 10:17

cookie do not work.

More low I result a code

Where an problem?

--------------------------------- 

<div class="hdr">DHTML JavaScript Grid samples </div>
 <table width="100%"  id="tblToGrid" imgpath="../imgs/">
      <tr>
        <td >Column 1</td>
        <td width="50%">Column 2</td>
      </tr>
      <tr>
        <td>value 11</td>
        <td>value 12</td>
      </tr>
      <tr>
        <td>value 21</td>
        <td>value 22</td>
      </tr>
      <tr>
        <td>value 31</td>
        <td>value 32</td>
      </tr>
      <tr>
        <td>value 41</td>
        <td>value 42</td>
      </tr>
      <tr>
        <td>value 51</td>
        <td>value 52</td>
      </tr>
    </table>
 <h1>&nbsp;</h1>
   
<script>
window.onload = new function(){
var mygrid = dhtmlXGridFromTable('tblToGrid');
for (var i=0; i<mygrid.getColumnCount(); i++)
        mygrid.adjustColumnSize(i);            
      mygrid.loadSizeFromCookie(sizesx);
      mygrid.enableAutoSizeSaving(sizesx);
}

</script>

Answer posted by satprem on Mar 14, 2008 05:47

cookie do not work.

More low I result a code

Where an problem?

--------------------------------- 

<div class="hdr">DHTML JavaScript Grid samples </div>
 <table width="100%"  id="tblToGrid" imgpath="../imgs/">
      <tr>
        <td >Column 1</td>
        <td width="50%">Column 2</td>
      </tr>
      <tr>
        <td>value 11</td>
        <td>value 12</td>
      </tr>
      <tr>
        <td>value 21</td>
        <td>value 22</td>
      </tr>
      <tr>
        <td>value 31</td>
        <td>value 32</td>
      </tr>
      <tr>
        <td>value 41</td>
        <td>value 42</td>
      </tr>
      <tr>
        <td>value 51</td>
        <td>value 52</td>
      </tr>
    </table>
 <h1>&nbsp;</h1>
   
<script>
window.onload = new function(){
var mygrid = dhtmlXGridFromTable('tblToGrid');
for (var i=0; i<mygrid.getColumnCount(); i++)
        mygrid.adjustColumnSize(i);            
      mygrid.loadSizeFromCookie(sizesx);
      mygrid.enableAutoSizeSaving(sizesx);
}

</script>

Answer posted by Support on Mar 14, 2008 06:26
Try to remove "new" from onload event handler.

The following should work correctly:

window.onload = function(){
var mygrid = dhtmlXGridFromTable('tblToGrid');
for (var i=0; i<mygrid.getColumnCount(); i++)
        mygrid.adjustColumnSize(i);            
      mygrid.loadSizeFromCookie("sizesx");
      mygrid.enableAutoSizeSaving("sizesx");
}
Answer posted on Mar 14, 2008 08:58

hm...

ie explorrer:

error in line ...
"sizes" - Definition is absent

 

------
<script>
 
window.onload = function(){
var orders_table = dhtmlXGridFromTable('orders_tableID');
for (var i=0; i<orders_table.getColumnCount(); i++)
        orders_table.adjustColumnSize(i);            
     orders_table.loadSizeFromCookie(sizes);  // <-   error line
     orders_table.enableAutoSizeSaving(sizes);
 
        orders_table.setEditable(false);
        orders_table.setSkin("grey");
        orders_table.enableMultiselect(false);
        orders_table.enableAutoHeight;
   //    orders_table.enableColumnAutoSize(true);
   orders_table.enableLightMouseNavigation(true);
 //    orders_table.enableKeyboardSupport(true);
 // orders_table.enableLightMouseNavigation(true);
//  orders_table.enableColumnMove(true);
//  orders_table.enableRowspan(true);
//    orders_table.setInitWidths("150,*,50,80,50,80")
 //  orders_table.attachFooter("èòîãè,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,x<b>7000</b>,<div id='nr_q'>0</div>,-,<div id='sr_q'>0</div>",["text-align:left;"]);
 // orders_table.setColAlign("left,left,right,right,right,right,right,right,right,right,right,right,right,right,right,right,right");
// orders_table.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro");
 //   orders_table.setColSorting("str,str,int,int,int,int,str,str,str,str,str,str,str,str,str,str,str");
// orders_table.setColumnColor("white,white,#e1ecf7,white,#e1ecf7,white,white,white,white,white,white,white,white,white,white,white,white");
}
    // -->

Answer posted by Support on Mar 14, 2008 10:20
You missed quotes around sizes

    orders_table.loadSizeFromCookie("sizes");  // <-   missed quotes
     orders_table.enableAutoSizeSaving("sizes");