The igx grid seems to only read the date after I resize the window. My structure is rather simple and basic, I'm not trying to edit the date and I haven't implemented yet any advanced features. After loading (or putting in a search value) I get the error text "Grid has no data.", a simple resize of the window makes it display the values it should.
(The first table is the classic <table> as comparison, they both use the same data)
[edit]
<igx-grid id="grid1" [width]="'100%'" [data]="this.zahlungsbedingungen" [autoGenerate]="false">
The binding here should be straight forward enough.
ngOnInit() { this.zahlungsbedingungResource.query({ q: '*' }).$observable.subscribe(zb => { zb.forEach((z) => { this.zahlungsbedingungResource.get(z.$primaryKey, { current: true }).$observable.subscribe(q => { this.zahlungsbedingungen.push(q); }); }) }); console.log(this.zahlungsbedingungen); //... }
Hello Andreas,
Can you provide a sample reproducing the issue? I suspect it is something with the way the grid is data bound and the fact that the grid itself has OnPush as a default change detection strategy. Is you data source an observable + async pipe or a simple array?
Thank you for the quick reply here too, I added som resources to the initial post. I should be using observables, is there a way to trigger the change detection manually? But then again, that would just address the symptom, not the root of the problem.
Thank you for the updated code snippet.
And yes the problem is that you add data records to the already bound data property of the grid. However since the grid is OnPush by default it does not do a deep check on it. This is an advantage since if you bind, for example a array of 100k records, we don't have to check each of them on every detection cycle. What you can do is either change the reference of the input, use an observable + async pipe or manually trigger the change detector of the grid. The last option while available usually is rarely needed. Here is a sample which demonstrates the different methods.
That sample was really helpful, thank you.
With our setup the search query might take a moment, so after you sent your search you have a moment where you see this 'ugly' error text "Grid has no data.". Is there a way to either block it, so you simple see an empty grid for a moment, or changing the text, for example into something like 'loading'?
Yes, there are actually two ways you can change it.
The first is the `emptyGridMessage` input where you can change the text when the grid has no data. While that is fast and simple the `emptyGridTemplate` option provides way more customization as you can template whatever you feel appropriate for your use case.
Here is the previous sample modified with the template option and the relevant API documentation section.