Print endRender of rowGroup

Print endRender of rowGroup

antoniocibantoniocib Posts: 277Questions: 62Answers: 1

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 ?

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    The RowGroup Known Limitations state this:

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

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    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">
    
    
  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    return me this error when i click pdf button:

    File 'Roboto-Regular.ttf' not found in virtual file system
    
  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1
    edited April 2020

    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;
          }
        },
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    So what i do Kevin?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

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

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1
    edited April 2020
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    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!

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited April 2020

    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

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

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

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    @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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

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

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1
    edited April 2020

    @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:

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited April 2020

    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

  • RajeenaRajeena Posts: 6Questions: 1Answers: 0

    hi

  • RajeenaRajeena Posts: 6Questions: 1Answers: 0

    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));
            }
          });
      

      });

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Please Kevin's reply in your other thread,

    Colin

  • RajeenaRajeena Posts: 6Questions: 1Answers: 0

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

Sign In or Register to comment.