Hi,
I'm using Ignite-UI-Angular 2 and currently stuck on the following problem.Basically, I want to "update" whats inside the columns-property of my grid options. So starting my app the grid is building with a default column setup and no data provided. I wanna have the ability for every user to store the grid options (size and visibility of columns) in the database. So actually what I need to do is as the grid is initializing is to request if there is a value for that options in my database and return a response. If there is no value, build the grid with the default columns, if yes, build the grid with the options from the database.My first thought was, I can dynamically change the content of the grid (I'm loading the data into DataSource after initialization). So WHY shouldn't that be possible with the column headers? But after now 8 hours of experimenting and throwing hundreds of search requests into google I haven't found a solution.So I need to know: Is there ANY possibility to eighter update my columns-property or initializing my grid AFTER I have got the response from my service function?Regards,Markus
Hi Markus,
Thank you for posting in our forums!
Could you please provide more information about how your Angular components and app are set up? Particularly regarding my following questions.
1. Are you initializing the igGrid through the directives, or through the component's constructor, etc...2. What kind of service are you using that is returning the options?3. Could this service get the user's settings from the database and return the correct settings up front?
Looking forward to hearing from you.
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