Pivot - printing issue

Webix JS
#1

Hi,

I would like to print Pivot, but there are couple of problems:

  1. Pivot has the scrollbars and printed copy has too. Is there any way to print full content of Pivot? Exporting to PDF is not working for me because it uses external link.

  2. Pivot columns have the right align settings. Despite this all columns align left when printing. How one can correct that?

#2

Hi Mika,

Export to Pdf/Excell doesn’t require an extra script - it comes out of box. So you can use it, the default syntax very simple:

grida.$$('data').exportToPDF()

The only limitation of this export is that all the columns will be shown on the list with a portrait mode, and they may shrink.

Still, you can select the column you want to show as well as customize their width, headers, etc. Check the documentation, please http://docs.webix.com/datatable__export.html#exporttopdf.

#3

Well, when after

grida.$$('data').exportToPDF()

the PDF document is available at

http://webix-export.appspot.com/export/pdf

My app should work offline also. Thus I am looking for another way to print :slight_smile:

#4

Do you really need offline solution, or one that can be used in an intranet ?

The export service can be installed locally. PHP, java and .net solutions are available.

#5

I see. But using the online service is not the only possibility.

So you can generate local Pdf copy as well. You can download and install the Export package ( PHP, and Java and ASP .NET packages are available). Download links are here.

#6

I have missed mention about local java service in docs, I’m sorry. That could be an option.

Thank you so much.

#7

Well, I have a problems with java service too.

So I am trying just to copy pivot to another browser tab. I guess it would be light and clear solution :slight_smile:

I have tried in pivot tab:

function print(){
  window.open("printpivot.html");
}

And then on a new page:

webix.ui({
  view:"pivot",
  id:"pivot"
});          

var sourcePivot = window.opener.$$("pivot");
var targetPivot = $$("pivot");
           
var config = sourcePivot.getStructure();
targetPivot.define("structure", config);

targetPivot.data.clearAll();
sourcePivot.data.each(function(obj){
       targetPivot.data.add(obj); 
});        

targetPivot.define("yCount", _???_);
targetPivot.resize();

And here the new questions:

  1. How one can copy filter settings of the sourcePivot to the targetPivot?
  2. How one can estimate targetPivot height? I can get open items with getOpenItems() but how can I get children count?
  3. How one can change tab page height equal the targetPivot height?
#8

Hi,

Previous questions are solved. It works as expected excepting one thing. One row cells are not placed on straight line.

Please, have a look at

How can I fix this?

Thank you

#9

Hi,

Try changing default CSS pattern for the left part of pivot:

.webix_ss_left{
      margin-top:{{same value}}; 
}
#10

Hi, Helga,

It does not help. I am using original css without any changing. Modifying margin-top cause right column header shifting.

Please take a look on example at http://pivot.webix.com/samples/03_table_api/01_cell_styling.html. Select last row and make a print preview. You will see that cells are shifted like http://snag.gy/T08kH.jpg

Disabling folder icon as mentioned here http://docs.webix.com/datatree__node_templates.html#complextemplates like

var datatable = targetPivot.$$("data");
datatable.attachEvent("onAfterLoad", function() {
    this.getColumnConfig('name').template = function(obj, common){
        return return common.space(obj,common) + common.icon(obj,common) + obj.name;
    };
});

solved the problem.

At last I have final question. Pivot column_1 has a right align setting as

var datatable = targetPivot.$$("data");
var column_1 = datatable.config.columns[1];
column_1.css = {"text-align":"right"};

Despite this column_1 aligns left when printing. Is there any way to fix that?

Thank you.

#11

Hi Mika,

I succeeded in printing right aligned values via:

$$("pivot").$$("data").config.columns[1].cssFormat = function(){ return "style"; }
$$("pivot").$$("data").refresh();

where style is

.style{
       text-align:right;
}
#12

It works like a charm. Thank you so much Helga.