ZK - Open Source Ajax Java FrameworkZK - Open Source Ajax Java Framework

ZK PivotTable Question

estebanz01
19 Nov 2011 14:59:10 GMT
19 Nov 2011 14:59:10 GMT

Good Morning everyone,

I've got a question about the size of row fields in the pivot table: It's some way to resize that cells?

Grettings

vincentjian
22 Nov 2011 03:25:17 GMT
22 Nov 2011 03:25:17 GMT

Hi estebanz01,

There are two steps to resize cell witdh.
First, you have to override PivotRenderer.getColumnSize() to customize the cell width.
Here is the sample:

public int getColumnSize(Pivottable table, PivotHeaderContext columnContext, PivotField field) {
       int columnSize = 100; //the default width for all columns, measure in pixel
       if(columnContext.isGrandTotal() && field != null) {
              columnSize = 150;
       } else {
              if("columnTitle1".equals(field.getTitle()))
                     columnSize = 300;
              if("columnTitle2".equals(field.getTitle()))
                     columnSize = 90;
       }
       return columnSize;
}

Second, override default CSS in the zul:
<style>
.z-pivottable-body, .z-pivottable-cell-body {
    border-spacing: 0;
    border: 1px solid red;
    cursor: default;
    width: 0;
}
</style>

estebanz01
28 Nov 2011 15:27:15 GMT
28 Nov 2011 15:27:15 GMT

Grettings,

First of all, thanks for your answer. I tried to use the override function without any result.

I create a class that implements the PivotRenderer class, override the function and I call it in the override function doAfterCompose like this:

private Pivottable pivot;
/* other private variables */
private Renderer sizeCols;
/* Operations, Data Values, etc... */
pivot.setPivotRenderer(sizeCols);

And the Rendererer class looks like this:


import org.zkoss.pivot.Calculator;
import org.zkoss.pivot.PivotField;
import org.zkoss.pivot.PivotHeaderContext;
import org.zkoss.pivot.PivotRenderer;
import org.zkoss.pivot.Pivottable;

public class Renderer implements PivotRenderer{

	@Override
	public int getColumnSize(Pivottable table, PivotHeaderContext columnContext, PivotField field){
    	int columnSize = 100;
    	if(columnContext.isGrandTotal() && field != null){
    		columnSize = 150;
    	}
    	else{
    		if("Filas".equals(field.getTitle()))
    			columnSize = 30;
    		if("Columnas".equals(field.getTitle()))
    			columnSize = 50;
    		if("Valores".equals(field.getTitle()))
    			columnSize = 0;
		}
    	return columnSize;
	}

	@Override
	public int getRowSize(Pivottable arg0, PivotHeaderContext arg1,
			PivotField arg2) {
		// TODO Auto-generated method stub
		return 0;
	}

	@Override
	public String renderCell(Object arg0, Pivottable arg1,
			PivotHeaderContext arg2, PivotHeaderContext arg3, PivotField arg4) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public String renderField(Object arg0, Pivottable arg1, PivotField arg2) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public String renderGrandTotalField(Pivottable arg0, PivotField arg1) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public String renderSubtotalField(Object arg0, Pivottable arg1,
			PivotField arg2, Calculator arg3) {
		// TODO Auto-generated method stub
		return null;
	}
	
}

Thanks again for helping me.

vincentjian
1 Dec 2011 10:04:19 GMT
1 Dec 2011 10:04:19 GMT

Hi,
Notice my second step, override default CSS in the zul is necessary to let the column width work.

estebanz01
2 Jan 2012 22:33:25 GMT
2 Jan 2012 22:33:25 GMT

Hi,

Take a look to my index.zul

<zk>
	<style>
		.z-pivottable-body, .z-pivottable-cell-body{
			border-spacing: 0px;
			border: 1px solid red;
			cursor: default;
			width: 0px;
		}
	</style>
	<label id="etiqueta" style="font-size: 30px; font-weigth: bold"/>
	<window id="mainWin" apply="Tabla.PivotController">
    <pivottable id="pivot" hflex="1">
        <div>Valores</div>
        <div>Columnas</div>
        <div>Filas</div>
    </pivottable>
    </window>
    <separator />
</zk>

That doesn't work. Why?

Thanxs for your answer and interesting.

vincentjian
3 Jan 2012 03:52:35 GMT
3 Jan 2012 03:52:35 GMT

Hi,

Did you upgrade pivottable to stable version?
Please try to upgrade to the stable version and the CSS override is no longer necessary.
BTW, the API changes a lot too but is more easy to use.
If you still have the problem about the column size after upgrading, please post the problem again, thanks.