Print endRender of rowGroup

antoniocib

Hi guys should I have a table with the rowGroup function when I press the print button how do I get the endRender row printed too ?

kthorngren

The RowGroup Known Limitations state this:

No support for the export options of the Buttons extension - the grouping information is just ignored

Kevin

antoniocib

Kevin one solution for this exist or i cant do anythings?

colin

If there was a solution, it would be supported

Search the forum, there are a few threads where people have offered workarounds, such as here and here.

Colin

antoniocib

 dom:Blrtip;

    buttons: [
    { text:'PDF',
        extend: 'pdf',
        footer : true,
        header : true,
        orientation:'portrait',
        customize: function (doc) {
            var lastColX=null;
            var lastColY=null;
            var bod = []; // this will become our new body (an array of arrays(lines))
            //Loop over all lines in the table
            doc.content[1].table.body.forEach(function(line, i){
                //Group based on first column (ignore empty cells)
                if(lastColX != line[0].text && line[0].text != ''){
                    //Add line with group header
                    bod.push([{text:line[0].text, style:'tableHeader'},'','','','']);
                    //Update last
                    lastColX=line[0].text;
                }
                //Group based on second column (ignore empty cells) with different styling
                if(lastColY != line[1].text && line[1].text != ''){
                    //Add line with group header
                    bod.push(['',{text:line[1].text, style:'subheader'},'','','']);
                    //Update last
                    lastColY=line[1].text;
                }
                //Add line with data except grouped data
                if( i < doc.content[1].table.body.length-1){
                    bod.push(['','',{text:line[2].text, style:'defaultStyle'},
                                    {text:line[3].text, style:'defaultStyle'},
                                    {text:line[4].text, style:'defaultStyle'}]);
                }
                //Make last line bold, blue and a bit larger
                else{
                    bod.push(['','',{text:line[2].text, style:'lastLine'},
                                {text:line[3].text, style:'lastLine'},
                                {text:line[4].text, style:'lastLine'}]);
                }

            });
            //Overwrite the old table body with the new one.
            doc.content[1].table.headerRows = 3;
            doc.content[1].table.widths = [50, 50, 150, 100, 100];
            doc.content[1].table.body = bod;
            doc.content[1].layout = 'lightHorizontalLines';

            doc.styles = {
                subheader: {
                    fontSize: 10,
                    bold: true,
                    color: 'black'
                },
                tableHeader: {
                    bold: true,
                    fontSize: 10.5,
                    color: 'black'
                },
                lastLine: {
                    bold: true,
                    fontSize: 11,
                    color: 'blue'
                },
                defaultStyle: {
                fontSize: 10,
                color: 'black'
                }
            }
        }
    }
],

@kthorngren kevin after i add this show me a button, but this when I click it, it starts spinning and it doesn't stop but it doesn't open anything...

There are the my libraries

        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jq-3.3.1/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.20/af-2.3.4/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sp-1.0.1/sl-1.3.1/datatables.min.js"></script>

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.20/af-2.3.4/b-1.6.1/b-colvis-1.6.1/b-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/cr-1.5.2/fc-3.3.0/fh-3.1.6/kt-2.5.1/r-2.2.3/rg-1.1.1/rr-1.2.6/sc-2.0.1/sp-1.0.1/sl-1.3.1/datatables.min.css">

antoniocib

return me this error when i click pdf button:

File 'Roboto-Regular.ttf' not found in virtual file system

antoniocib

Hi @kthorngren and @colin I was able to make the pdf file grouped by this code but I have no idea now how to add the rowGroup endRender in the pdf file.

pdf button code:

 buttons: [
    { text:'PDF',
        extend: 'pdf',
        footer : true,
        header : true,
     orientation:'landscape',
         pageSize: 'LEGAL',
         page:'current',
        customize: function (doc) {
            var lastColX=null;
            var lastColY=null;

            var bod = []; // this will become our new body (an array of arrays(lines))
            //Loop over all lines in the table
            doc.content[1].table.body.forEach(function(line, i){
             //Group based on first column (ignore empty cells)
               if(lastColX != line[12].text && line[12].text != ''){
                    //Add line with group header
                    bod.push([{text:line[12].text, style:'tableHeader'},'','','','','','','','','','','','','','']);
                    //Update last
                  lastColX=line[12].text;
             }
                //Add line with data except grouped data
              if( i < doc.content[1].table.body.length+1){
                    bod.push(['','',{text:line[0].text, style:'defaultStyle'},
                                    {text:line[1].text, style:'defaultStyle'},
                                    {text:line[2].text, style:'defaultStyle'},
                                                                        {text:line[3].text, style:'defaultStyle'},
                                                                        {text:line[4].text, style:'defaultStyle'},
                                                                        {text:line[6].text, style:'defaultStyle'},
                                                                        {text:line[8].text, style:'defaultStyle'},
                                                                        {text:line[9].text, style:'defaultStyle'},
                                                                        {text:line[10].text, style:'defaultStyle'},
                                                                        {text:line[11].text, style:'defaultStyle'},
                                                                        {text:line[12].text, style:'defaultStyle'},
                                                                        {text:line[13].text, style:'defaultStyle'},
                                                                        {text:line[14].text, style:'defaultStyle'}

                                                                    ]);

         }

            });
            //Overwrite the old table body with the new one.
            doc.content[1].table.headerRows = 1;
            doc.content[1].table.widths = [50, 50, 50, 50, 50, 50, 50, 50,50,20,20,20,50,50,50];
            doc.content[1].table.body = bod;
            doc.content[1].layout = 'lightHorizontalLines';

            doc.styles = {
                subheader: {
                    fontSize: 10,
                    bold: true,
                    color: 'black'
                },
                tableHeader: {
                    bold: true,
                    fontSize: 10.5,
                    color: 'black'
                },
                lastLine: {
                    bold: true,
                    fontSize: 11,
                    color: 'blue'
                },
                defaultStyle: {
                fontSize: 10,
                color: 'black',
                                text:'center'

                }
            }
        }
    }
],

rowGroup code:

    rowGroup: {
        endRender: function ( rows, group ) {
                var controllo = '';

                var intVal = function ( i ) {
                        return typeof i === 'string' ?
                                i.replace(/[\$,]/g, '')*1 :
                                typeof i === 'number' ?
                                        i : 0;
                                    };

            var epalcount = rows
                .data()
                .pluck('epal')
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0) ;

                            var indcount = rows
                                    .data()
                                    .pluck('ind')
                                    .reduce( function (a, b) {
                                            return intVal(a) + intVal(b);
                                    }, 0) ;

                                    var perdcount = rows
                                            .data()
                                            .pluck('perd')
                                            .reduce( function (a, b) {
                                                    return intVal(a) + intVal(b);
                                            }, 0) ;

                                            var epcount = (epalcount + perdcount);

                                    if(
                                         epcount == 33 && indcount == 0 ||
                                         epcount == 31 && indcount == 1  ||
                                         epcount == 30 && indcount == 2 ||
                                         epcount == 29 && indcount == 3 ||
                                         epcount == 28 && indcount == 4 ||
                                         epcount == 26 && indcount == 5 ||
                                         epcount == 25 && indcount == 6 ||
                                       epcount == 24 && indcount == 7 ||
                             epcount == 23 && indcount == 8 ||
                             epcount == 21 && indcount == 9 ||
                                         epcount == 20 && indcount == 10 ||
                                         epcount == 19 && indcount == 11 ||
                                         epcount == 18 && indcount == 12 ||
                                         epcount == 16 && indcount == 13 ||
                                         epcount == 15 && indcount == 14 ||
                                         epcount == 14 && indcount == 15 ||
                                         epcount == 13 && indcount == 16 ||
                                         epcount == 11 && indcount == 17 ||
                                         epcount == 10 && indcount == 18 ||
                                         epcount == 9 && indcount == 19 ||
                                         epcount == 8 && indcount == 20 ||
                                         epcount == 6 && indcount == 21 ||
                                         epcount == 5 && indcount == 22 ||
                                         epcount == 4 && indcount == 23 ||
                                         epcount == 3 && indcount == 24 ||
                                         epcount == 1 && indcount == 25
                                     )

                                    {
                                     var controllo = "CAMION PIENO";
                                  }


                                 else if(
                                     epcount == 32  && indcount == 0 ||
                                     epcount == 27 && indcount == 4||
                                     epcount == 22 && indcount == 8 ||
                                     epcount == 17 && indcount == 12 ||
                                     epcount == 12 && indcount == 18 ||
                                     epcount == 7 && indcount == 20 ||
                                     epcount == 2 && indcount == 24

                                 )

                                 {
                                     var controllo = "UNA EPAL DISPONIBILE";
                                 }

                                 else if(
                                     epcount == 31 && indcount > 1  ||
                                     epcount == 30 && indcount > 2 ||
                                     epcount == 29 && indcount > 3 ||
                                     epcount == 28 && indcount > 4 ||
                                     epcount == 26 && indcount > 5 ||
                                     epcount == 25 && indcount > 6 ||
                                     epcount == 24 && indcount > 7 ||
                                     epcount == 23 && indcount > 8 ||
                                     epcount == 21 && indcount > 9 ||
                                     epcount == 20 && indcount > 10 ||
                                     epcount == 19 && indcount > 11 ||
                                     epcount == 18 && indcount > 12 ||
                                     epcount == 16 && indcount > 13 ||
                                     epcount == 15 && indcount > 14 ||
                                     epcount == 14 && indcount > 15 ||
                                     epcount == 13 && indcount > 16 ||
                                     epcount == 11 && indcount > 17 ||
                                     epcount == 10 && indcount > 18 ||
                                     epcount == 9 && indcount > 19 ||
                                     epcount == 8 && indcount > 20 ||
                                     epcount == 6 && indcount > 21 ||
                                     epcount == 5 && indcount > 22 ||
                                     epcount == 4 && indcount > 23 ||
                                     epcount == 3 && indcount > 24 ||
                                     epcount == 1 && indcount > 25 ||
                                     epcount == 32  && indcount > 0 ||
                                     epcount == 27 && indcount > 4||
                                     epcount == 22 && indcount > 8 ||
                                     epcount == 17 && indcount > 12 ||
                                     epcount == 12 && indcount > 18 ||
                                     epcount == 7 && indcount > 20 ||
                                     epcount == 2 && indcount > 24 ||

                                     epcount > 31 && indcount == 1  ||
                                     epcount > 30 && indcount == 2 ||
                                     epcount > 29 && indcount == 3 ||
                                     epcount > 28 && indcount == 4 ||
                                     epcount > 26 && indcount == 5 ||
                                     epcount > 25 && indcount == 6 ||
                                     epcount > 24 && indcount == 7 ||
                                     epcount > 23 && indcount == 8 ||
                                     epcount > 21 && indcount == 9 ||
                                     epcount > 20 && indcount == 10 ||
                                     epcount > 19 && indcount == 11 ||
                                     epcount > 18 && indcount == 12 ||
                                     epcount > 16 && indcount == 13 ||
                                     epcount > 15 && indcount == 14 ||
                                     epcount > 14 && indcount == 15 ||
                                     epcount > 13 && indcount == 16 ||
                                     epcount > 11 && indcount == 17 ||
                                     epcount > 10 && indcount == 18 ||
                                     epcount > 9 && indcount == 19 ||
                                     epcount > 8 && indcount == 20 ||
                                     epcount > 6 && indcount == 21 ||
                                     epcount > 5 && indcount == 22 ||
                                     epcount > 4 && indcount == 23 ||
                                     epcount > 3 && indcount == 24 ||
                                     epcount > 1 && indcount == 25 ||

                                     indcount > 25 ||
                                      epcount > 33
                                    )

                                 {
                                    var controllo = "CONTROLLA I BANCALI";
                                 }

                                 else
                                 {
                                     var controllo = "CAMION VUOTO";
                                 }


                                 var colore = '';
                                 if(controllo === "CAMION PIENO")
                                 {
                                                colore=('verde');
                                 }
                                 else if (controllo === "CONTROLLA I BANCALI")
                                 {
                                     colore= ('rosso');
                                 }
                                 else if (controllo === "UNA EPAL DISPONIBILE" || controllo === "CAMION VUOTO")
                                 {
                                     colore=('giallo');
                                 }


            return $('<tr/>')
                            .addClass(colore)
                            .append( '<td></td>' )
                            .append( '<td></td>' )
                            .append( '<td></td>' )
                            .append( '<td></td>' )
                            .append( '<td></td>' )
                            .append( '<td></td>' )
                            .append( '<td></td>' )
                .append( '<td>'+epcount+'</td>' )
                            .append( '<td>'+indcount+'</td>' )
                            .append( '<td>'+controllo+'</td>' )
                            .append( '<td></td>' )
                            .append( '<td></td>' )
                            .append( '<td></td>' );
        },
        dataSrc: function (data) {
        return data.dlinea;
      }
    },

kthorngren

Without actually being able to work with the code it is hard to say. Please put together a simple example using http://live.datatables.net/. We don't need your exact data. A simple endRender will suffice.

Kevin

antoniocib

@kthorngren for me is more easy link my code as i do always, okay?

antoniocib

http://damoratraffico.netsons.org/rowGroup/scrivania1.html

kthorngren

Its difficult for us to work with and debug since we can make changes. Maybe someone more familiar with PDF export can look at your code and see the probblem.

Kevin

antoniocib

So what i do Kevin?

kthorngren

Start with this example from your previous thread:
http://live.datatables.net/toqomaxo/1/edit

Update the JS and CSS files to use the CDN you listed above. Add your buttons config. It should chow the RowGroups and your buttons and be a working example.

Kevin

antoniocib

So i must to copy and paste my code in this "virtual table"?

antoniocib

http://live.datatables.net/toqomaxo/3/edit @kthorngren

kthorngren

It took awhile to get the test case running. Needed to update the JS and CSS and fix the arrays to match the number of columns in the table. Next time please make sure the test case runs so we can spend our time helping with the problem.

I changed the code a bit to put the column value at the end of the group instead of the beginning.
http://live.datatables.net/toqomaxo/4/edit

Kevin

antoniocib

I'm so sorry Kevin, and I don't know how this test case works, I just didn't know how to make it work... my fault!

Now i try to work it thanks for ur time!

antoniocib

Hi @kthorngren I tried the code and it's identical to yours but I'm getting this mistake again what is it I don't understand?

Uncaught TypeError: Cannot create property 'positions' on string'.

https://damoratraffico.netsons.org/rowGroup1/scrivania1.html

kthorngren

My guess is its this line:

bod.push([{text:endRenderText, style:'tableHeader'},'','','','','','','','','','','','','','']);

This is where you are adding blank ('') strings. First place to check is to make sure this array has the same number of columns as the rest of the table. You also need to make sure this array bod.push([{text:line[0].text, style:'defaultStyle'}, .... ]) and the doc.content[1].table.widths = [50 ... ] array are the proper length.

Kevin

antoniocib

Nah Kevin the problem was a bastard ","..

antoniocib

@kthorngren
Hi, Kevin.
I was trying to import the sum of a column in the pdf file but I don't understand why I can't get it I'm enclosing you under the test case link I hope you can help me (I haven't implemented the print function in the file yet because the sum doesn't work for me, I just limited myself to using console.log for debugging)

http://live.datatables.net/toqomaxo/7/edit

kthorngren

The sum function you have is not going to work. Its meant to be used with the Javascript Reduce() method which will sum an array of numbers.

You could push the number you want to sum onto an array then each time you push the endRenderText you can use the reduce function to create the sum that you can include. Similar to how reduce() is used in your endRender function.

Kevin

antoniocib

Can u do an example on this test case Kevin, pleease ?
http://live.datatables.net/toqomaxo/7/edit

antoniocib

@kthorngren

            doc.content[1].table.body.forEach(function(line, i){

controllo_ind= line[indcount].text;
controllo_eur=line[eurcount].text;


controllo_epal=line[epalcount].text;

var intVal = function ( i ) {
        return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                        i : 0;
                    };

                    controllo_epal.reduce( function (a, b) {
                                    return intVal(a) + intVal(b);
                            }, 0) ;


console.log(controllo_epal);

I try this way but console return me:

The object does not support the property or the 'reduce' method.

The content of "controllo_epal" is:

kthorngren

Here you go:
http://live.datatables.net/toqomaxo/8/edit

Add these code snippets:

            var dataSrc = 2;
          var age =  3;
           var ageArray = [];  // Array of ages for the group

              //Add line with data except grouped data
              if( i < doc.content[1].table.body.length+1){
                
                    // Add age to array if its not header or footer
                    var lineStyle = line[age].style;
                    if ( lineStyle !== 'tableHeader' && lineStyle !== 'tableFooter' ) {
                      ageArray.push(parseInt(line[age].text));
                    }
                
                    bod.push([{text:line[0].text, style:'defaultStyle'},

                 //Add line with group header at end of group
                 if (endRenderText !== '') {
                 //  console.log(nextEndRender)
                   
                 // Sum the age array
                 sum_ages = ageArray.reduce( function (a, b) {
                    return a + b;
                 }, 0 );
                   
                 ageArray = [];  // Clear the age array for next group
                   
                   bod.push([{text: endRenderText, style:'tableHeader'},
                             {text: sum_ages, style:'tableHeader'},
                             '',

Kevin

Rajeena

hi

Rajeena

hy ..can anyone help pdf is not working im row grouping ..
here i attached the code

1.  buttons: [
   

   { text:'PDF',
   extend: 'pdf',
   footer : true,
   header : true,
   orientation:'landscape',
   pageSize: 'LEGAL',
   page:'current',
   customize: function (doc) {
   var lastColX=null;
   var lastColY=null;
   var headerRows = 2;
   var dataSrc = 0;

       var endRenderText = '';  // Keep track of dataSrc column value change for endRender
   
       var bod = []; // this will become our new body (an array of arrays(lines))
       //Loop over all lines in the table
       doc.content[1].table.body.forEach(function(line, i){
   
   
         //Group based on dataSrc column (ignore empty cells)
         if(endRenderText != line[dataSrc].text && line[dataSrc].text != '' && (i+1) > headerRows){
            nextEndRender = line[dataSrc].text;
   
            //Add line with group header at end of group
            if (endRenderText !== '') {
              console.log(nextEndRender);
              bod.push([{text: endRenderText, style:'tableHeader'},'','','','','','']);
            }
   
          // Get next endRender value
          endRenderText=nextEndRender;
   
   
         }
   
         //Add line with data except grouped data
         if( i < doc.content[1].table.body.length+1){
               bod.push([{text:line[0].text, style:'defaultStyle'},
                         {text:line[1].text, style:'defaultStyle'},
                         {text:line[2].text, style:'defaultStyle'},
                         {text:line[3].text, style:'defaultStyle'},
                         {text:line[4].text, style:'defaultStyle'},
                         {text:line[5].text, style:'defaultStyle'},
                         {text:line[6].text, style:'defaultStyle'},
   
                       ]);
   
        }
   
       });
       //Overwrite the old table body with the new one.
       doc.content[1].table.headerRows = 1;
       doc.content[1].table.widths = [50, 50, 50, 50, 50, 50,50];
       doc.content[1].table.body = bod;
       doc.content[1].layout = 'lightHorizontalLines';
   
                        doc.styles = {
           subheader: {
               fontSize: 10,
               bold: true,
               color: 'black'
           },
           tableHeader: {
               bold: true,
               fontSize: 10.5,
               color: 'black'
           },
           lastLine: {
               bold: true,
               fontSize: 11,
               color: 'blue'
           },
           defaultStyle: {
           fontSize: 10,
           color: 'black',
                           text:'center'
   
           }
       };
   
    }
   

   }
   ],

             });
   
             $('#loadingmessage2').hide();
   
   
          },
         error: function (e) {
           alert(JSON.stringify(e));
         }
       });
   

   });

colin

Please Kevin's reply in your other thread,

Colin

Rajeena

ok..i understood print is not working in datatable

but we can do pdf in rowgrouping below is the link which i got from above..

my prblm is it is not working in my table..

http://live.datatables.net/toqomaxo/8/edit

colin

Can you explain what isn't working for you, please. I'm seeing totals in both the table and the PDF.

Colin