Hi Michael,

I will summarize the most important code snippets for you in the following:

index.html
------------------------------------------
<ig-grid #grid1 [(options)]="gridOptions" primary-key="id" [dataSource]='searchResult' (cellClick)="cellClickHandler($event)">
   <features>
      <hiding [columnChooserHeight]="480" [columnChooserWidth]="600"></hiding>
      <sorting [type]="local" [mode]="multi"></sorting>
      <resizing></resizing>
      <column-moving [columnMovingDialogContainment]="window"></column-moving>
      <paging [type]="local" [pageSize]="15" [showPageSizeDropDown]="false"></paging>
      <selection [multipleSelection]="true" [allowMultipleRangeSelection]="true" [mode]="row" [activation]="true" [persist]="true"></selection>
   </features>
</ig-grid>


index.component.ts
------------------------------------------
imports { ... }

@Component {(
   ...
)}
export class IndexComponent implements AfterViewInit, OnChanges, OnInit {
   private gridOptions: IgGrid;
   @ViewChild("grid1") myGrid: IgGridComponent;
   private searchResult: any;
   private gridColumns = [];

   ngOnInit() {
      this.setupGridColumns();
      this.createGridSettings();
   }
   
   setupGridColumns() {
      this._appService.loadSettings(2, "settings key").subscribe(res => {
         let settings: any = JSON.parse(res.SettingValue);
         if (settings === undefined || settings === null) {
            this.gridColumns = GridColumns.setupGridColumnsByMode(this._applicationModus); /* <== loading default column setup */
         } else {
            this.gridColumns = settings;
         }
      });
   }
   
   createGridSettings() {
      this.gridOptions = {
         autoCommit: true,
         dataSource: this.searchResult,
         width: "100%",
         height: "500px",
         autofitLastColumn: false,
         autoGenerateColumns: false,
         primaryKey: "Id",
         columns: this.gridColumns,
         featureChooserIconDisplay: "none"
      };
   }

So to answer Your first question: As You can see I'm using the directives to initialize but at the same binding nearly all the grid-options from the angular-component file. So the problem is if I would delay the creation of the grid settings I would just get an error in my web console that the grid could not be initialized caused by the missing gridOptions at that time. That means I already need to have the final grid setup at the moment the view gets created by index.html but as far as I know, there is no "earlier" way than doing that in ngOnInit().

To answer Your second and third question: It is a simple POST request in a function of type Observable to obtain the gridSetup in the database. Works all as expected except that I can only get the response after the grid has been built already.

Hope the code/information I provide helps to understand my problem better!

Best regards,
Markus

Hi Markus,

Nice solution!  I'm glad you were able to find something that works for you and thank you for sharing it.

Hi,

this post can be closed! I found a solution by my own via Angular. Was actually the most uncomplex method but hasn't come to my mind until today :D
Just wrapped my whole Template in a condition by adding an *ngIf="dataAvailable" to my main <div>

Then I modified my setupGridColumns() function like that...

resolveGridColumns() {
      this._appService.loadSettings(2, "settings key").subscribe(res => {
         let settings: any = JSON.parse(res.SettingValue);
         if (settings === undefined || settings === null) {
            this.gridColumns = GridColumns.setupGridColumnsByMode(this._applicationModus); /* <== loading default column setup */
         } else {
            this.gridColumns = settings;
         }
         this.dataAvailable = true;
         this.createGridSettings();

      });
   }

... and I was good to go.

Thanks for your time anyway :)
Have a nice day,

Markus