SpreadJS - How to reduce white space in sheets

Originally Posted 4 October 2014, 8:07 am EST

  • Originally Posted 4 October 2014, 8:07 am EST

    Image 1: shows white space in spreadjs designer
    Image 2: shows white space when displayed in browser
    Also attached is the ssjson file.

    Ultimately, I am trying to print the sheet, but it is printing a blank page.



  • Reply

    Hello,

    Thank you for the elaboration. I loaded the ssjson file provided by you in SpreadJS and displayed the same in Chrome browser. When I printed the same using the printing feature of Chrome, then the print preview displayed only one single page, that consists of the amount of data that is currently visible in the browser window and hence prints only one page.

    I have attached the HTML Page used for testing and the screenshots depicting the output observed at my end. Kindly refer to the same.

    Could you please modify the attached HTML Page to depict your issue. Please let me know if I missed any of the steps that would help me to replicate the issue at my end and debug it further.

    Thanks,
    Manpreet Kaur
    2014/10/JSON_print.html




  • Reply

    >>Are you loading the attached ssjson file in SpreadJS and printing the same from the browser window and facing the issue there.

    I load the ssjson in Chrome and use Chrome's print feature. When you load the ssjson in the browser using wijspread.fromJSON, you will notice the extra space.

    >>Further, are you getting only blank pages on printing or you get the SpreadJS data, but it even prints the blank pages, due to the blank space below the data rows.

    All of the correct data is printing in addition to the blank pages due to the blank space.

    It is unclear how to get rid of the blank space below the data rows.
  • Reply

    Hello,

    Could you please elaborate your query further describing the flow of your application. Are you loading the attached ssjson file in SpreadJS and printing the same from the browser window and facing the issue there. Please let us know how exactly are you performing the printing. Further, are you getting only blank pages on printing or you get the SpreadJS data, but it even prints the blank pages, due to the blank space below the data rows.

    Please elaborate your query further, so that we can accordingly guide you ahead with this issue.

    Thanks,
    Manpreet Kaur
  • Reply

    Added ssjson
    2014/10/attachments.zip
  • Reply

    Hello,

    On further investigation I could observe that Google Chrome basically printed the DIV that is been transformed to SpreadJS. If I increase the height of the DIV further i.e. more than 1000px, then it prints multiple pages with SpreadJS data scattered on multiple pages. However, if I reduced the size of the DIV, then it did not generated blank pages. By setting different values for the height, I could observe that if the height of the DIV is set to 1300px, then it prints all the data in SpreadJS in one page and does not generates any blank pages.

    Kindly refer to the attached sample used for testing. I have also attached a screenshot which depicts the output observed at my end.

    So, it seems that the printing depends on the size of the div being transformed into SpreadJS. I would suggest you setting the height of the DIV to 1300px to see if it resolves the issue that you are currently facing.

    Hope it helps.

    Thanks,
    Manpreet Kaur

  • Reply

    You set the height of the ss div to 1000px. This will result in only one page being printed, but it will also cut off part of the content.

    In your screenshot you will notice only one check box is being shown, and it is not even the complete box (the bottom is missing). There are about a dozen more rows, as seen in the attached image.

    In my example, there *should* be two pages. The second page will be about 20% full. Unfortunately, there are three. The final page is blank.

  • Reply

    Hello,

    The height of SpreadJS is equivalent to the height of the DIV that is been transformed into SpreadJS. If the height of the DIV is small, then SpreadJS displays scrollbars accordingly, so that the user can scroll to view the complete data. If the height is large enough then all the data is displayed at once and no scrollbars are shown.

    You can rather set the height of the DIV by looping through the rows in SpreadJS and get the height of the each row, the sum of these heights would give you the value that can be set as the height of the DIV, and hence the height of SpreadJS.

    In your scenario you can get this height after the ssjson file has been loaded. However, you have to make sure that the ssjson file does not contains any blank rows else, the height of blank rows would also be added to the total height calculated above, and hence result in larger DIV which would print blank pages.

    Here is the code to calculate the height:


    var hrc = sheet.getRowCount($.wijmo.wijspread.SheetArea.colHeader);
    var vrc = sheet.getRowCount($.wijmo.wijspread.SheetArea.viewport);
    var hheight = 0, rheight = 0;
    for (var hr = 0; hr < hrc; hr++) {
    hheight = hheight + sheet.getRowHeight(hr, $.wijmo.wijspread.SheetArea.colHeader)
    }
    for (var rr = 0; rr < vrc; rr++) {
    rheight = rheight + sheet.getRowHeight(hr, $.wijmo.wijspread.SheetArea.viewport)
    }
    var totalHeight = hheight + rheight;
    alert(totalHeight);
    $("#ss").css("height", totalHeight);


    Hope it helps.

    Thanks,
    Manpreet Kaur
  • Reply

    The spreadsheet will be different depending on the user. How can I get the height of the spreadsheet? I will use this to then set the height of the div.
  • Reply

    Hello,

    Thank you for providing the sample application. Here are my observations further on this issue:

    1. I tried opening the "CannotResizeForPrinting.html" file found in the folder attached above in Google Chrome. However, SpreadJS was not displayed.

    2. I even updated the SpreadJS references in "CannotResizeForPrinting.html" file, to use the latest version of SpreadJS i.e. 2014v2.13, however the SpreadJS was still not displayed.

    So, I could not debug the issue further at my end. Please let me know if I missed any of the steps that would help me to replicate the issue and debug it further.

    3. Further, I loaded the ssjson file in the folder attached above in Spread Designer and I could observe that it still contains blank rows. This might be a reason that the height of the SpreadJS is more than the number of rows that contain data and hence it prints empty pages. I would suggest you try loading a ssjson file that does not contains any empty rows and this might work for you.

    Thanks,
    Manpreet Kaur
  • Reply

    I was able to get the height (1337 in my case) and set the div, but it still printed three pages.

    Notice in the image that the canvas and the remaining divs. I tried resizing these individually, but that did not work either.

    If you print > cancel > print again, it will resize correctly on the second attempt.

    FYI - there is typo with this line

    rheight = rheight + sheet.getRowHeight(hr, $.wijmo.wijspread.SheetArea.viewport)


    rheight = rheight + sheet.getRowHeight(rr, $.wijmo.wijspread.SheetArea.viewport)


  • Reply

    Hello,

    Unfortunately, I am not able to replicate the issue at my end. The issue seems to be specific to your application. Could you please share a sample application depicting your issue so that I can replicate and debug the issue further at our end.

    Thanks,
    Manpreet Kaur
  • Reply

    Using the latest wijmo files:
    - spread sheet does not show up until I try to print

    Using my current wijmo files:
    - spread sheet shows up, but does not resize until I try to print
    2014/10/Test.zip
  • Marked as Answer

    Reply

    Hello,

    It is good to know that your issue has been resolved. We have also requested the concerned team to add details regarding the "Refresh" method to the documentation, for future reference.

    Thanks,
    Manpreet Kaur
  • Reply

    I think the problem is you only update the size of the container, but doesn't update the size of the SpreadJS, so please try to add this code:
    $('#' + this._elementId).wijspread("refresh");
    after the code:
    $('#' + this._elementId).css('height', totalHeight);
    in your SpreadSheet.prototype.setContainerHeight function.
    I tried your sample, it works in my IE and FF with the latest version SpreadJS.

    Hope it helps,
  • Reply

    1. Are you trying to run this directly from the folder? Did you received an error? Are you using Chrome? Chrome will not allow loading a local file. If this is the problem, use FireFox instead or run Chrome using the following switch. chrome.exe --allow-file-access-from-files

    2. See above. Again, it only displayed for me after trying to print once.

    3. Which sheet has blank rows? The ServiceReport sheet has blank space below the last row (61), but the space does not contain any rows that can be deleted. How can I remove the white space in the the sheets?
  • Reply

    It also works in Chrome and with the latest wijmo scripts.

    Thanks.

    FYI - The refresh method does not appear to be in the online documentation.

    http://helpcentral.componentone.com/NetHelp/SpreadHClientUG/webframe.html#welcome.html
  • Reply

    Hello, I also face the same printing issue while we have given printing command its shows only white paper for the solution we can replace the cartridges, and reset the driver and also check the printer cable while we cannot find the relevant answer we call to [url]Epson Technical Support [/url=https://www.epsonsupport247.com/]that provides true answer.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels