setColumnHidden problem with #cspan

thejavo · January 27, 2012, 8:06pm

I’m using dhtmlxSuite v.3.0 Professional edition build 110707.

I have a grid with multiple, complex headers in an XML file that i put in the end of this post.
In that file I have a button in one header that calls a function.

<![CDATA[#rspan,0001 SUCURSAL 1+/-,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,0001 Sucursal 2 CAEA,#cspan,#cspan,#cspan,#cspan,#cspan,0002 kjasd,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,,#cspan]]>

after loading the file on an “onXLE” event I do this to give the columns a width:
var colNum=grid_obj.getColumnsNum();
for (j = 0; j < colNum; j++){
grid_obj.adjustColumnSize(j);
}

FIRST ISSUE: This is too slow!!!, is there another way of doing this?

When you click the button executes this function:

function gridHideCols(col){
var columnas = new Array(), colNum = mygrid.getColumnsNum();
estado = true;
columnas = mygrid.getUserData("",“cols_”+col).split(",");
for (a in columnas ) { columnas[a] = parseInt(columnas[a]); }

if (mygrid.isColumnHidden(columnas[0])) { estado = false; };

for (j = columnas[0]; j <= columnas[1]; j++){

mygrid.setColumnHidden(j,estado);

}
}

So this Hides/Shows the columns that I’ve told to in a userdata tag (check the xml). Again this process is too slow. But the first problem is this:
If you try this you’ll see that the first header doesn’t look right (it hides headers that shouldn’t hide), so I have to remove all #cspan from header to make it work right.
¿Is there any solution to this?, I need the #cspan for presentation purposes.

Thank you very much for your time people.

XML:

<?xml version=\"1.0\" encoding=\"iso-8859-1\"?> <table style="width:100%;height:100%;"><tr><td style="text-align:right;">Pto de venta - Vendedor - Numero -> </td></tr><tr><td style="vertical-align:bottom;">Articulo<BR/> |- Cliente</td></tr></table> Dimensiones #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan #cspan Total #cspan

	<beforeInit>
		<call command="attachHeader">
			<param><![CDATA[#rspan,0001 SUCURSAL 1<button onClick=gridHideCols(1)>+/-</button>,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,0001 Sucursal 2 CAEA,#cspan,#cspan,#cspan,#cspan,#cspan,0002 kjasd,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,,#cspan]]></param>
		</call>
		<call command="attachHeader">
			<param><![CDATA[#rspan,,#cspan,000-INICIAL<button onClick="gridHideCols(2)">+/-</button>,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,,#cspan,000-INICIAL<button onClick="gridHideCols(37)">+/-</button>,#cspan,#cspan,#cspan,,#cspan,000-INICIAL,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,#cspan,,#cspan]]></param>
                    </call>
		<call command="attachHeader">
			<param><![CDATA[#rspan,,#cspan,,#cspan,C A1-00000040,#cspan,C A1-00000043,#cspan,C A1-00000044,#cspan,C A1-00000047,#cspan,C B1-00000017,#cspan,F A1-00000039,#cspan,F A1-00000041,#cspan,F A1-00000042,#cspan,F A1-00000045,#cspan,F A1-00000046,#cspan,F B1-00000018,#cspan,F B1-00000019,#cspan,F B1-00000020,#cspan,F B1-00000021,#cspan,,#cspan,,#cspan,F FA2-00000001,#cspan,,#cspan,,#cspan,F FA1-00000122,#cspan,F FA1-00000123,#cspan,F FB1-00000014,#cspan,F FB1-00000015,#cspan,,#cspan]]></param>
		</call>
		<call command="attachHeader">
			<param><![CDATA[#rspan,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto,Kilos,Neto]]></param>
		</call>
	</beforeInit>
</head>
<row id="1">
	<cell>            2-ALFAJOR JORGITO</cell>
	<cell></cell>
	<cell>388.13</cell>
	<cell></cell>
	<cell>388.13</cell>
	<cell></cell>
	<cell>-12.43</cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell>-86.25</cell>
	<cell></cell>
	<cell>12.43</cell>
	<cell></cell>
	<cell>431.25</cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell>43.12</cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell></cell>
	<cell>388.13</cell>
	<row id="2">
		<cell>000001-RODRIGUEZ LARRETA</cell>
		<cell></cell>
		<cell>431.25</cell>
		<cell></cell>
		<cell>431.25</cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell>431.25</cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell>431.25</cell>
	</row>
	<row id="3">
		<cell>000003-CONSUMIDOR FINAL</cell>
		<cell></cell>
		<cell>-43.12</cell>
		<cell></cell>
		<cell>-43.12</cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell>-86.25</cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell>43.12</cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell>-43.12</cell>
	</row>
	<row id="4">
		<cell>000045-RODRIGUEZ ALBERTO</cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell>-12.43</cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell>12.43</cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
	        <cell></cell>
	        <cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
		<cell></cell>
	</row>
</row>
<userdata name="cols_1">3,32</userdata>

sematik · February 21, 2012, 4:42pm

You may try to use “Fast” mode of the grid. It helps to skip rendering of the grid before the operation is finished:
docs.dhtmlx.com/doku.php?id=dhtm … #fast_mode

For example:

mygrid.loadXML("../common/gridH.xml",function(){ mygrid.startFastOperations(); // start "FAST" mode // code for any grid operations placed between start and stop commands var colNum=mygrid.getColumnsNum(); for (j = 0; j < colNum; j++){ mygrid.adjustColumnSize(j); } mygrid.stopFastOperations(); // stop "FAST" mode (all events will be skipped between start and stop) });

What about the issue with hiding columns - unfortunately it cannot be reconstructed locally.
What version of dhtmlxGrid do you have? If it’s less than 3.0 - it is recommended to update it.

thejavo · March 12, 2012, 2:20pm

Uouuu!, FastOperations ROCKS!!!. Great thing. But. Why don’t you include it in your {#collapse}n:text method?, if you do that my headers would be more simple

I still have a problem with #cspan. Let me explain it:
I have this grid with complex headers. I’ve made my own collapse this way:
In the XML, when I want a column to be collapsable I’ve add this code:

-

The style is this:
.btnexp {
padding-bottom: 4px;
padding-right: 2px;
cursor: pointer;
width: 10px;
height: 10px;
background-color: #FFFFFF;
text-align: center;
}

then a userdata with this information:
3,32

then the javascript function:

function gridHideCols(col){
var columnas = new Array(), colNum = mygrid.getColumnsNum();
estado = true; icono=‘+’;
columnas = mygrid.getUserData(“”,“cols_”+col).split(“,”);

for (a in columnas ) { columnas[a] = parseInt(columnas[a]); }
if (mygrid.isColumnHidden(columnas[0])) { estado = false; icono='-'; };					
mygrid.startFastOperations(); //GREAT!!!
	for (j = columnas[0]; j <= columnas[1]; j++){
		mygrid.setColumnHidden(j,estado);
	}
mygrid.stopFastOperations(); 
$("#hdBtn"+col).html(icono);
}

So when I’ve click the button the column will collapse or expand depending on it’s state.
But, as you can see in the picture the header of the collumn preservs it #cspan, so the result is that the columns headers mixes. If I erases the #cspan’s from headers everything works fine, but I need them for presentation purposes. I’ll leave an XML file that constructs the grid.

GRID XML:

<?xml version="1.0" encoding="iso-8859-1"?> <table style="width:100%;height:100%;"><tr><td style="text-align:right;">Vta.Fecha - Sucursal -> </td></tr><tr><td style="vertical-align:bottom;">U.Gama/Marca<BR/> |- Pdv.Nombre</td></tr></table> Dimensiones #cspan #cspan #cspan #cspan #cspan Total <![CDATA[#rspan,01/03/2010

-

,#cspan,02/03/2010

-

,#cspan,03/03/2010

-

,#cspan,]]> 2,2 4,4 6,6 3,-1 5,-1 7,-1 ADES (ADE) 4,388.50 4,388.50 4,185.85 4,185.85 5,256.21 5,256.21 13,830.55 000013 - CHEN JINLIANG ( 10002226 ) 32.72 32.72 32.72 000030 - ZHENG MING HUI ( 10002226 ) 98.15 98.15 98.15 Total 50,855.41 50,855.41 48,417.13 48,417.13 63,112.16 63,112.16 162,384.69

sematik · March 27, 2012, 5:09pm

Unfortunately the colspanning is incompatible with column’s hiding.

thonil · August 31, 2016, 7:03am

Still in version 5 of DHTMLX it is true - grid.setColumHidden with a footer that contain #cspan disrupts column-alignment. It would be very helpful if this information was available in the documentation: docs.dhtmlx.com/api__dhtmlxgrid_ … ooter.html.