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,

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

Hi Markus,

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