SpreadJS : Length of scrolling (Removing the empty background)

SpreadJS : Length of scrolling (Removing the empty background)

Posted by: firangi on 8 September 2017, 9:45 am EST

• 

  firangi

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:45 am EST

  I want to limit the scrolling of the sheet till there is data. I don’t want the user to see the empty canvas in the end.

• 

  manpreetkaur

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:45 am EST

  Hello,

  Currently, there is no option to hide the gray area in the SpreadSheet or restrict the scrolling till the data area. I have posted an enhancement request for the same. It might be implemented in the future releases if the development team finds it to be feasible.

  As a workaround you may either set the width of the last column in a such way that it covers the empty gray area, here is the code for the same:

  [js]
  
  $(document).ready(function () {
  
  $(“#ss”).wijspread({ sheetCount: 1 });
  
  var spread = $(“#ss”).wijspread(“spread”);
  
  spread.backColor(“green”);
  
  spread.grayAreaBackColor(“Transparent”);
  
  var sheet1 = spread.getSheet(0);
  
  sheet1.setRowCount(20, $.wijmo.wijspread.SheetArea.viewport);
  
  sheet1.setColumnCount(3, $.wijmo.wijspread.SheetArea.viewport);
  
  var cc = sheet1.getColumnCount();
  
  var swidth = parseInt($(“#ss”).css(‘width’));
  
  var curwidth = 0;
  
  for (var c = 0; c < cc; c++) {
  
  curwidth = curwidth + sheet1.getColumnWidth(0);
  
  }
  
  var newwidth = (swidth - curwidth) + sheet1.getColumnWidth(cc-1)*2;
  
  sheet1.setColumnWidth(cc - 1, newwidth);
  
  });
  
  [/js]

  Or, you may set the color of the gray area same as the backcolor of the Spread, so as to give the user an impression that the gray area is a part of the Spread sheet. You can use the grayAreaBackColor property of Spread to accomplish the same, here is the code:

  [js]
  
  spread.grayAreaBackColor(“Transparent”);
  
  [/js]

  Hope it helps.

  Thanks,
  
  Manpreet Kaur

• 

  firangi

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:45 am EST

  Hey , Thanks for the reply , Just want to know one more thing is there a way to apply pagination in Spreadjs . I saw one example in the documentation where it was done using dataView.

  var productView = new wijmo.data.ArrayDataView(sourceData(),{pageSize:10});

  it was using knockout for binding. Can you give me some idea how to do the same using Angular js. Cause i tried binding but unable to see any data in the view.

• 

  manpreetkaur

  • Post Options:
  • Link
    Copy

  Posted 8 September 2017, 9:45 am EST

  Hello,

  Your query has been answered at the following forum link. Kindly refer to the same.

  Thanks,
  
  Manpreet Kaur

• 

  justin.arias

  • Post Options:
  • Link
    Copy

  Posted 31 July 2020, 12:54 pm EST

  Has there been any update on this? Has the team released any fix for removing the extra space on the side

• 

  justin.arias

  • Post Options:
  • Link
    Copy

  Posted 31 July 2020, 12:54 pm EST

  Has there been any update on this? Has the team released any fix for removing the extra space on the side

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 4 August 2020, 2:57 am EST

  Hi Justing,

  We have now added the scrollbarMaxAlign option to restrict the scrolling to the last row/column.

  spread.options.scrollbarMaxAlign = true;
  

  You may also refer to the following demo: https://www.grapecity.com/spreadjs/demos/features/workbook/scrollbars/overview/purejs

  Regards