Problems building in dynamic environment

Problems building in dynamic environment

Posted by: pedro.moraes on 3 May 2023, 11:31 pm EST

• 

  pedro.moraes

  • Post Options:
  • Link
    Copy

  Posted 3 May 2023, 11:31 pm EST

  Hello,

  I’m having some problems when I build in a dynamic environment.

  I make some changes accessing the querySelector and on my local machine it works but not on the environment.

  I use angular 8 with version 16 of spread.

  An example:

  designer: Designer.Spread.Sheets.Designer.Designer;
  workbook: GC.Spread.Sheets.Workbook = null;
  ...
  
  ngOnInit() {
      const divSPread = document.getElementById('designer-container') as HTMLDivElement;
      this.designer = new Designer.Spread.Sheets.Designer.Designer(divSPread, this.spreadDesignerConfig);
      this.workbook = this.designer.getWorkbook() as GC.Spread.Sheets.Workbook;
      this.initDesigner();
  }
  
  initDesigner() {
   const colors = ['#fb4455', '#ffce55', '#45dd98', '#1e194f', '#afaafe', '#333c4e', '#808389', '#b8bcc5', '#e1e4ea', '#f1f5fb'];
      document.querySelector('.ribbon-button-item[data-command="ribbon.backColor"]').addEventListener('click', (_) => {
        this.mudarAsCoresPadroes(colors);
      });
  ...
  }
  
    private mudarAsCoresPadroes(colors) {
      const color = this.translateService.instant('MEMORIA_CALCULO.STANDARD_COLORS_TITLE');
      const colorElements = document.querySelectorAll(`[group-name="${color}"]`);
  
      for (let index = 0; index < 10; index++) {
        const element: any = colorElements[index];
        element.style.backgroundColor = colors[index];
        element.setAttribute('color', colors[index]);
      }
    }

  In the code snippet I am making a change in the default colors of the color palette but it doesn’t work in the dynamic environment.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 7 May 2023, 3:33 pm EST

  Hi Pedro,

  Apologies for the late response. The Grapecity server was experiencing technical issues, which caused the delay.

  I tested with the offline sample of the SpreadJS Designer Component with the code snippet that you have provided still, I was unable to replicate the issue at my end. At my end, it seems to be working fine as expected.

  Could you kindly clarify what you mean by the “dynamic environment”? I also tested building the application and hosting it on a server and it seems to be working fine.

  Please find below the sample that I have used for testing. The sample using the Angular 15 (also tested with Angular 8) and SpreadJS V16.1.0.

  Could you kindly share us a sample replicating the issue? Or kindly share the environment details on which the application is running so that we may test it on the similar environment. You could also refer to the attached sample that we have used for testing.

  Regards,

  Ankit

  Sample: angular.zip