Named Styles are not working for export excel and import it again

Named Styles are not working for export excel and import it again

Posted by: Arasudayan.Anand on 5 March 2019, 6:26 pm EST

• 

  Arasudayan.Anand

  • Post Options:
  • Link
    Copy

  Posted 5 March 2019, 6:26 pm EST

  Hi Team,

  In my application i’m using spreadjs 11 version. I’m using named styles for few cells.
  
  when i’m exporting that to excel and import it again that styles are not retaining.

  Also i checked the same in spreadjs Demo galary.
  
  Steps :
  
  1) i went to below link. https://www.grapecity.com/en/demos/spread/JS/TutorialSample/#/demos/ExcelIO

  2. I changed code to

  window.onload = function () {
  
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById(“ss”));
  
  // spread.fromJSON(jsonData);
  
  var spreadNS = GC.Spread.Sheets;
  
  var sheet = spread.getSheet(0);
  
  sheet.suspendPaint();
  
  var cellStyle = new spreadNS.Style();
  
  cellStyle.backColor = “red”;
  
  var rowStyle = new spreadNS.Style();
  
  rowStyle.backColor = “green”;
  
  var columnStyle = new spreadNS.Style();
  
  columnStyle.backColor = “yellow”;

          sheet.setText(4, 4, 'cell style', spreadNS.SheetArea.viewport);
          sheet.setStyle(4, 4, cellStyle, spreadNS.SheetArea.viewport);
          sheet.setStyle(4, -1, rowStyle, spreadNS.SheetArea.viewport);
          sheet.setStyle(9, -1, rowStyle, spreadNS.SheetArea.viewport);
          sheet.setStyle(-1, 4, columnStyle, spreadNS.SheetArea.viewport);
          sheet.setStyle(-1, 6, columnStyle, spreadNS.SheetArea.viewport);
  
          cellStyle.name = 'style1';
          rowStyle.name = 'style2';
          columnStyle.name = 'style3';
          sheet.addNamedStyle(cellStyle);
          sheet.addNamedStyle(rowStyle);
          sheet.addNamedStyle(columnStyle);
          sheet.setText(1, 0, 'style1', spreadNS.SheetArea.viewport);
          sheet.setStyle(1, 0, sheet.getNamedStyle('style1'), spreadNS.SheetArea.viewport);
          sheet.setText(1, 1, 'style2', spreadNS.SheetArea.viewport);
          sheet.setStyle(1, 1, sheet.getNamedStyle('style2'), spreadNS.SheetArea.viewport);
          sheet.setText(1, 2, 'style3', spreadNS.SheetArea.viewport);
          sheet.setStyle(1, 2, sheet.getNamedStyle('style3'), spreadNS.SheetArea.viewport);
  
          var style5 = new spreadNS.Style();
          style5.backColor = "red";
          style5.isVerticalText = 'true';
          style5.textIndent = 5;
          var style6 = new spreadNS.Style();
          style6.backColor = "green";
          style6.isVerticalText = 'true';
          style6.wordWrap = 'true';
          var style7 = new spreadNS.Style();
          style7.backColor = "yellow";
          style7.isVerticalText = 'true';
          style7.shrinkToFit = 'true';
          sheet.setRowHeight(12,120);
          sheet.setText(12, 9, 'Text', spreadNS.SheetArea.viewport);
          sheet.setStyle(12, 9, style5, spreadNS.SheetArea.viewport);
          sheet.setText(12, 10, 'VerticalText', spreadNS.SheetArea.viewport);
          sheet.setStyle(12, 10, style6, spreadNS.SheetArea.viewport);
          sheet.setText(12, 11, 'Vertical', spreadNS.SheetArea.viewport);
          sheet.setStyle(12, 11, style7, spreadNS.SheetArea.viewport);
          sheet.resumePaint();
          
  var excelIo = new GC.Spread.Excel.IO();
  var sheet = spread.getActiveSheet();
  document.getElementById('loadExcel').onclick = function () {
      var excelFile = document.getElementById("fileDemo").files[0];
      var password = document.getElementById('password').value;
      // here is excel IO API
      excelIo.open(excelFile, function (json) {
          var workbookObj = json;
          spread.fromJSON(workbookObj);
      }, function (e) {
          // process error
          alert(e.errorMessage);
          if (e.errorCode === 2/*noPassword*/ || e.errorCode === 3 /*invalidPassword*/) {
              document.getElementById('password').onselect = null;
          }
      }, {password: password});
  };
  document.getElementById('saveExcel').onclick = function () {
  
      var fileName = document.getElementById('exportFileName').value;
      var password = document.getElementById('password').value;
      if (fileName.substr(-5, 5) !== '.xlsx') {
          fileName += '.xlsx';
      }
  
      var json = spread.toJSON();
  
      // here is excel IO API
      excelIo.save(json, function (blob) {
          saveAs(blob, fileName);
      }, function (e) {
          // process error
          console.log(e);
      }, {password: password});
  
  };
  

  };

  3. I exported this to excel
  4. i imported the downloaded excel then my named styles (cell(1,0),cell(1,1),cell(1,2)) were gone.

  Please resolve this issue on priority.

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 7 March 2019, 1:05 am EST

  Hello,

  I am able to replicate this issue with the latest version. I have submitted it as a bug to the development team. I will let you know as soon as I get an update on it. The tracking id for this is 270543.

  Thanks,
  
  Deepak Sharma

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 3 April 2019, 10:48 pm EST

  Hello,

  This is found to be an issue with the code. The isVerticalText option on style is boolean, but not string type, give the correct type will make the exporting excel work correctly.

         var style5 = new spreadNS.Style();
          style5.backColor = "red";
          style5.isVerticalText = true;
          style5.textIndent = 5;
          var style6 = new spreadNS.Style();
          style6.backColor = "green";
          style6.isVerticalText = true;
          style6.wordWrap = 'true';
          var style7 = new spreadNS.Style();
          style7.backColor = "yellow";
          style7.isVerticalText = true;
          style7.shrinkToFit = true;
  

  Thanks,
  
  Deepak Sharma