Row background colors when Print

Row background colors when Print

anant30anant30 Posts: 7Questions: 4Answers: 0

I am using CreatedRow callback to change the row background color (css) if certain values appears.

if (data[9] == "Pickup Only" && data[10] == 'none') { $('td', row).addClass('blue-class'); }

It shows the background color on browser but when I print it does not show colors.

I am using following print button code:

{
        extend: 'print',
        autoPrint: false,
        exportOptions: {
            columns: ':visible',
            stripHtml: true,
        },
        customize: function ( win ) {
            $(win.document.body)
                .css( 'font-size', '10pt' )
                .prepend(
                    '<img src="images/img1.jpg" style="position:absolute; opacity: 0.5; width:7% ; height:7% ; top:0; left:20;" />'
        );
             
            $(win.document.body).find( 'table' )
                .addClass( 'compact' )
                .css( 'font-size', 'inherit' );

            $(win.document.body).find('h1').css('text-align','center');
        }
}

Answers

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

    This SO thread should get you going, there's an example on that page.

    Colin

  • anant30anant30 Posts: 7Questions: 4Answers: 0
    edited July 2020

    I tried following the example, but it threw an error

    var locationArray = table.column(1).data().toArray();
                                    var statusArray = table.column(9).data().toArray();
                                    var receiverArray = table.column(18).data().toArray();
    
                                    for (var i = 0; i < statusArray.length; i++) {
                                        if (locationArray[i] != '999' && statusArray[i] == "Pickup Only" && (receiverArray[i] == '' || receiverArray[i] == null)) {
                                            console.log(locationArray[i] + statusArray[i] + receiverArray[i]);
                                            win.content[1].table.body[i][0].fillcolor = '#f08080'
                                        }
                                    }
    

    table.scantrack.js:393 Uncaught TypeError: Cannot read property 'body' of undefined at Object.customize (table.scantrack.js:393) at x.action (buttons.html5.min.js:35) at h (datatables.min.js:294) at HTMLAnchorElement.<anonymous> (datatables.min.js:295) at HTMLAnchorElement.dispatch (datatables.min.js:15) at HTMLAnchorElement.r.handle (datatables.min.js:15)
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • galcottgalcott Posts: 53Questions: 15Answers: 1

    If the background is showing on screen but not printing, isn't this just a simple case of the fact that the default in all browsers is not to print background colors? Unless I'm missing something, the user would have to change that option in their browser. You can't control it via code.

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

    If the background is showing on screen but not printing, isn't this just a simple case of the fact that the default in all browsers is not to print background colors?

    That's true if you use the browser's print functionality. However, if you're using paging, then that would only print the current page. These questions refer to using the Buttons' print functionality, which will print all rows from all pages, and would need a code-level solution,

    Colin

  • dan.cosiodan.cosio Posts: 4Questions: 1Answers: 0

    This question is a few months old and doesn't appear to be answered.. I posted
    a similar issue today.
    I found that using bootstrap4 is the issue.. If I use the default Datatables styling everything works as expected.. My app used Bootstrap4 so I need this to work.. My example has test code

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

    See my first reply - that points to a SO thread showing how to do it.

    Colin

  • dan.cosiodan.cosio Posts: 4Questions: 1Answers: 0
    edited September 2020

    @colin I'm using customize and format which is what you show in the SO thread.. So my approach in the customize and fomat functions incorrect in setting the color. It does work without bootstrap(ie using jqueryui). See my jsfiddle example

    you can run the test there to see what I'm experiencing with both bootstrap 3 and 4in this scenerio..

    The example you show is using pdfHtml5.. I'm just using the print button..

  • dan.cosiodan.cosio Posts: 4Questions: 1Answers: 0

    @colin I did a test with pdfHtml5 and that does work.. however, using just the print bottom is where I'm having the issue.. I do have background graphics enabled in chrome..

This discussion has been closed.