[Simple Reports] IE11 Compatibility

Forge Component
Published on 4 Apr by Marcos Galigarcia
25 votes
Published on 4 Apr by Marcos Galigarcia

Hi, I've noticed that in IE11 there are some problems, at least in pagination, can you take a look?

It seams that there is a problem in the javascript.


Hi, Tiago, according to this property: http://www.w3schools.com/cssref/pr_gen_counter-increment.asp

It has support on IE8+

This is what I used for pagination. I will try change it for a JS solution for better compatibility on next versions, ok?

Thank you

I've changed your java and it is fixed, the only thing I've changed was the definition of the default value of the variable currPageBreakBottom, now it is defined in the beginning instead of in the function isInPageArea.

I've also created a new application and separated the widgets from the example, now i have the SimpleReports where the widgets are with the public proprieties a true and the function isInPageArea_Sample where is the example of usage.

Can it be fixed in the current Forge Component? I would like to try it; but the current demo doesn't work in IE11.


You can get it and fix it yourself, all you have to do is replace the javascript in the PrintPages for the following:

SyntaxEditor Code Snippet

var totalGroupPages;
var currGroupPage = 1;
var currPageBreakBottom = 0;
$(function() {
        totalGroupPages = $(".Page").length;
        // Check Multiples Group of Pages
            // Parse First Page of this group
            if( $(".Page.GroupPage-"+currGroupPage+" .non-printed").length>0 ) generateNextPage(currGroupPage);
            else if(currGroupPage ==  totalGroupPages) showPages();


function generateNextPage(GroupPageIndex){
        // Remove Last printed Elements
        $( ".Page.GroupPage-"+GroupPageIndex+":last" ).clone().insertAfter( ".Page.GroupPage-"+GroupPageIndex+":last" ).find(".printed").remove();
        // Remove Non Printed Elements From Last Page
        if( $(".Page.GroupPage-"+GroupPageIndex+" .non-printed").length>0 ) generateNextPage(GroupPageIndex);
        else if(currGroupPage ==  totalGroupPages) showPages();

function showPages(){
        // Add Total Page Number
        $(".PageTotal").text("/ "+$(".Page").length);
        if($(".Toolbar").length>0) getBookmark();

function isInPageArea($element,currPageIndex,currPageBreakBottom){
        // Set Current Page Area for Check Elements inside
        var currPageContentTop = $(".Page:eq("+currPageIndex+") .MainPageContent").offset().top;
        var currPageContentBottom = (currPageBreakBottom==0) ? currPageContentTop+$(".Page:eq("+currPageIndex+") .MainPageContent").height() : currPageBreakBottom;
        var elementHeight = $element.height();
        var elementTop = $element.offset().top;
        // Check if Element is between Top and Bottom Page
        if ( (elementTop >= currPageContentTop) && ( (elementTop + elementHeight) <= currPageContentBottom ) ) {
          // Its inside
          return true;
        } else {
          // Its outsite
          return false;

function parseCurrentPage(GroupPageIndex){

    var currPageIndex = $(".Page.GroupPage-"+GroupPageIndex+":last").index();
    var currPageBreakBottom = 0;
    // PageBreak
    // Check if thera is PageBreak inside page
    $(".Page.GroupPage-"+GroupPageIndex+":last .PageBreak").each(function(){
            var elementTop = $(this).offset().top;
            currPageBreakBottom = elementTop;
    // PrintContainer
    // Check if this container are inside page
    $(".Page.GroupPage-"+GroupPageIndex+":last .PrintContainer").each(function(){
        if(isInPageArea($(this),currPageIndex,currPageBreakBottom)){ $(this).removeClass("non-printed").addClass("printed");}
        else{ $(this).removeClass("printed").addClass("non-printed"); }

    // Table Records
    // Check if table rows are inside page
    $(".Page.GroupPage-"+GroupPageIndex+":last .TableRecords").each(function(){
        // For each row
        $(this).find("tbody tr").each(function(){
            if(isInPageArea($(this),currPageIndex,currPageBreakBottom)){ $(this).removeClass("non-printed").addClass("printed");}
            else{ $(this).removeClass("printed").addClass("non-printed"); }
        // Current Page TableRecords
        if( $(this).find("tbody tr:last").hasClass("printed") ) {$(this).addClass("printed");}
        if( $(this).find("tbody tr:first").hasClass("non-printed") ) {$(this).removeClass("printed").addClass("non-printed");}
    // List Records
    $(".Page.GroupPage-"+GroupPageIndex+":last .ListRecords").each(function(){
        // For each child
        $(this).find("> div").each(function(){
            if(isInPageArea($(this),currPageIndex,currPageBreakBottom)){ $(this).removeClass("non-printed").addClass("printed");}
            else{ $(this).removeClass("printed").addClass("non-printed"); }
        // For each new line (if you selected New Line attribute
        $(this).find("> br").each(function(){
            if(isInPageArea($(this),currPageIndex,currPageBreakBottom)){ $(this).removeClass("non-printed").addClass("printed");}
            else{ $(this).removeClass("printed").addClass("non-printed"); }
        if( $(this).find("> div:last").hasClass("printed") ) {$(this).addClass("printed");}
        if( $(this).find("> div:first").hasClass("non-printed") ) {$(this).removeClass("printed").addClass("non-printed");}

Thank you; all pages are printed now; but is there a way to hide to URL at the page footer? In Chrome it is printed as in the preview; but in IE the URL is printed at the footer.

You have to mess with the printing configurations in IE.