Apply frozen columns to Angular 6 app

Apply frozen columns to Angular 6 app

Posted by: kyle.m.vassella on 29 June 2018, 1:53 am EST

• 

  kyle.m.vassella

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 June 2018, 1:53 am EST

  I’ve got an Angular (not AngularJS) app with a demo spread.sheet on one of my pages. I’m trying to do something simple like freeze a column.

  The documentation says to make a frozen column, use the following JavaScript:
  
  activeSheet.setFrozenRowCount(1);
  
  activeSheet.setFrozenColumnCount(1);

  Where in my Angular application would I place this JavaScript – or is this not the right way to go about it?

• 

  kyle.m.vassella

  • Post Options:
  • Link
    Copy

  Posted 29 June 2018, 2:17 am EST

  Or rather, what is the typescript equivalent of the above JavaScript commands? I’m looking through the typescript declaration file but can’t seem to find something that works. For instance, to make other changes, the demo had me add the following typescript to spread.component.ts:

  spreadBackColor = ‘aliceblue’;
  
  sheetName = ‘First Incurred’;
  
  hostStyle = {
  
  maxwidth: ‘800px’,
  
  height: ‘600px’
  
  };
  
  data = [
  
  {Name: ‘Apple’, Category: ‘Fruit’, Price: 1, ‘Shopping Place’: ‘Wal-Mart’},
  
  {Name: ‘Potato’, Category: ‘Fruit’, Price: 2.01, ‘Shopping Place’: ‘Other’},
  
  {Name: ‘Tomato’, Category: ‘Vegetable’, Price: 3.21, ‘Shopping Place’: ‘Other’},
  
  {Name: ‘Sandwich’, Category: ‘Food’, Price: 2, ‘Shopping Place’: ‘Wal-Mart’},
  
  {Name: ‘Hamburger’, Category: ‘Food’, Price: 2, ‘Shopping Place’: ‘Wal-Mart’},
  
  {Name: ‘Grape’, Category: ‘Fruit’, Price: 4, ‘Shopping Place’: ‘Sun Store’}
  
  ];
  
  columnWidth = 100;

  I need something like this but to control frozenColumns. Is there a list of these TypeScript commands I can find for Spread?

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 1 July 2018, 7:36 pm EST

  Hello,

  Currently there is no direct TypeScript command to set the frozen column count. However you can use the frozenColumnCount() method to freeze the columns in workbookInitialized event.

  For example:

  
  <gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle"(workbookInitialized)="workbookInit($event)" >
    <gc-worksheet [name]="sheetName" [dataSource]="data" >
      <gc-column dataField="Name" width=300></gc-column>
      <gc-column dataField="Category" [width]=columnWidth></gc-column>
      <gc-column dataField="Price" [width]=columnWidth ></gc-column>
      <gc-column dataField="Shopping Place" [width]=columnWidth></gc-column>
      <gc-column dataField="Quantity" [width]=columnWidth></gc-column>
      <gc-column dataField="Demand" [width]=columnWidth></gc-column>
    </gc-worksheet>
  </gc-spread-sheets>
  
   workbookInit(args)
    { 
      //args.spread.options.scrollbarMaxAlign = true;
      var sheet = args.spread.getActiveSheet();
      sheet.options.protectionOptions.allowDeleteColumns = false;
      sheet.frozenColumnCount(2);
    }
  
  

  Thanks,
  
  Deepak Sharma