data not visible when loaded

[kuzman]

sometimes the data is not visible when loaded (scrollbarV: true), you need to trigger an event over the datatable in order to view the data: http://codepen.io/anon/pen/PZGBqg

[amcdnl]

Interesting I bet its related to this: https://github.com/Swimlane/angular-data-table/blob/master/src/components/DataTableDirective.js#L112 code in some form of a race case.

This is here so it can size correctly if its in a tab that isn't selected by default and then click the tab the grid would be smashed.

[pan-henryk]

I have run into the same problem. Is there a way to force some kind of fake event (as a workaround)? Also - I am not sure if it is related, but in one of my table uses actual table is smaller than dtable component itself. I need to trigger window resize to get it to proper size. BTW - thanks for tips on other problems I had!

[amcdnl]

ya, u could try triggering a window resize event

[michaelkrnac]

I have the same behavior here ... but only in firefox.

I tried a workaround by triggering window resize after the data is loaded. But it is not working.

$scope.products = data;
$window.dispatchEvent(new Event('resize'));

The strange thing is, that it only shows the elements of one page and after scrolling there is only white space.

Or is this another bug?

btw. everything works fine in chrome.

[amcdnl]

Ah, I've only been testing in chrome ( DOH! ).

If you remove the check visibility function ( https://github.com/Swimlane/angular-data-table/blob/master/src/components/DataTableDirective.js#L112 ) , does it work?

[michaelkrnac]

If i remove this function i do not see any rows at all (and no scrollbar).

When i change the content of my row data (load new json) a scrollbar appears an when i start scrolling the rows appear. This behavior is in chrome and firefox the same if i remove the function check visibility.

I am using angular material and my table is inside a div container with the css attribute flex. Maybe this is a problem?

[amcdnl]

Try this - https://gist.github.com/amcdnl/4782594a743098536219#file-table-js-L102

[michaelkrnac]

In chrome is the pagination gone. In firefox and chrome i still have this scrolling issue. The problem is that it sticks to one page. The page counter is stuck and i scroll into white space.

[amcdnl]

i really don't have time to look at it this week, if u PR i'll push through quickly though.

[david-gurley]

Any update on this?

[amcdnl]

@david-gurley sorry, havent had time.

[ghost]

See the first codepen given by @kuzman: http://codepen.io/anon/pen/PZGBqg

The table shows a scroll bar which indicate it has computed the height of .dt-body-scroller element (5000px in the example). It means the table has received the data correctly, here we have a 100 objects and 50 px line height so it adds up nicely.

But the rows are not in the HTML (screenshot at the end):

<dt-body rows="dt.rows" selected="dt.selected" expanded="dt.expanded" columns="dt.columnsByPin" on-select="dt.onSelected(rows)" on-row-click="dt.onRowClicked(row)" column-widths="dt.columnWidths" options="dt.options" on-page="dt.onBodyPage(offset, size)" on-tree-toggle="dt.onTreeToggled(row, cell)" class="ng-scope">
  <div class="progress-linear ng-hide" role="progressbar" ng-show="body.options.paging.loadingIndicator">
    <div class="container">
      <div class="bar"></div>
    </div>
  </div>
  <div class="dt-body" ng-style="body.styles()" dt-seletion="" style="width: 1428px; height: 300px;">
    <div ng-style="scrollerStyles()" ng-transclude="" class="dt-body-scroller" style="height: 5000px;">
      <!-- ngRepeat: r in body.tempRows track by $index -->
    </div>
    <!-- ngIf: body.rows && !body.rows.length -->
    <!-- ngIf: body.rows === undefined -->
  </div>
</dt-body>

For some reason, the table does not add the element in the markup. For what I can see in the HTML, this means the tempRows is empty. But I don't know enough of the code to make hypothesis and start debugging. @amcdnl, could someone in your team spend some time on this issue, please?

[algcifaldi]

Hey team, I was noticing this issue as well so I went ahead and did a little debugging on it.

The surface of what I'm seeing is that in getRows, getFirstLastIndexes is returning an object that looks like this: { first: 0, last: NaN }

Without a $timeout or long-running request to set the data, calculatePageSize has not yet been executed by the time getFirstLastIndexes is called, so options.paging.size hasn't been set and 💥 NaN

Not sure how to sort out the race condition without really digging into this code more. For now, I'm adding paging: { size: numberOfRows } to my grid options.

Hopefully this unblocks someone else, but also please let us know if setting a paging.size would cause other ill affects.

[amcdnl]

@aglosson If you come up with a fix & PR, I'd be more than happy to merge. Make sure to make a demo of it not working and working with your changes. Thanks for helping the community with this workaround!

[penumatsasiva]

hey team i to have the same issue, can u fix dis plz. no data is displaying when refresh.

[kuzman]

Seems like the rendering of the grid and the data rendering are not in sync, the gird is there but the data not. My workaround was to $timeout the data fetch

[amcdnl]

I'm gonna put this in soon: https://medium.com/@amcdnl/javascript-s-new-intersectionobserver-cdce8a73bef8#.70u63hswy

[penumatsasiva]

@Austin

         please let me know once u added that code




                          thanks

                            siva

On Mon, Apr 18, 2016 at 6:16 PM, Austin [email protected] wrote:

I'm gonna put this in soon: https://medium.com/@amcdnl/javascript-s-new-intersectionobserver-cdce8a73bef8#.70u63hswy

— You are receiving this because you commented. Reply to this email directly or view it on GitHub https://github.com/Swimlane/angular-data-table/issues/119#issuecomment-211365385

[alexcheng068]

@aglosson @kuzman Hi, could you give a little bit more details of your workaround? thanks!

[kuzman]

@alexcheng068 I have modified the pen: http://codepen.io/anon/pen/XKZpzV I did a lot of experiments to see the minimal timeout value, and for me it was 100ms

[alexcheng068]

@kuzman thanks! (:

[ak05]

I got another issue: adding timeout breaks initial sorting as it executes before assigning data

[nglasantha]

is this fixed already ?