Shifted columns and rows

[aissaghouti]

Hi there,

Sometimes the data table is built shifted.

For the moment I do not know how to perfectly reproduce the bug. So to reproduce it I simply refresh the web browser and see, refresh and see, refresh and see...

Do you have an idea on what's going on here? Thanks.

With the bug:

Without the bug:

[ielektronick]

Hi Hm, that is really strange. Are there any errors in web-console? And did you specify md-select-id="property" for md-row? E.g.: <tr md-row md-select-id="brandId" ... >...</tr>

[aissaghouti]

Hi @ielektronick,

No errors in web-console. Yes, I specified the md-select-id

You can find the HTML code bellow:

<md-card>
    <md-toolbar class="md-table-toolbar md-default" ng-show="!filter.search && !selectedProducts.length">
        <div class="md-toolbar-tools">
            <md-button class="md-raised md-accent" style="color:#fff;" disabled>
                <span translate>New</span>
            </md-button>
            <div flex></div>
            <md-button class="md-icon-button" ng-click="filter.search = true;">
                <md-icon class="material-icons">search</md-icon>
                <md-tooltip>
                    <span translate>Search</span>
                </md-tooltip>
            </md-button>
            <md-button class="md-icon-button" ng-click="load()">
                <md-icon class="material-icons">refresh</md-icon>
                <md-tooltip>
                    <span translate>Refresh</span>
                </md-tooltip>
            </md-button>
        </div>
    </md-toolbar>
    <md-toolbar class="md-table-toolbar md-default" ng-show="filter.search && !selectedProducts.length">
        <div class="md-toolbar-tools">
            <md-icon>search</md-icon>
            <form flex>
                <input type="text" name="search" ng-model="search" placeholder="{{ 'Search...' | translate }}">
            </form>
            <md-button class="md-icon-button" ng-click="filter.search = false" aria-label="close">
                <md-icon class="material-icons">close</md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <md-toolbar class="md-table-toolbar md-accent md-hue-1" ng-show="selectedProducts.length">
        <div class="md-toolbar-tools">
            <div translate translate-n="selectedProducts.length" translate-plural="{{$count}} selected">1 selected</div>
        </div>
    </md-toolbar>
    <md-table-container>
        <table md-table md-progress="promise" md-row-select ng-model="selectedProducts" multiple>
            <thead md-head md-order="query.order">
                <tr md-row>
                    <th md-column md-order-by="identifier"><span translate>Product ID</span></th>
                    <th md-column md-order-by="name"><span translate>Name</span></th>
                    <th md-column md-order-by="manufacturer"><span translate>Manufacturer</span></th>
                    <th md-column md-order-by="lastModified" ><span translate>Last modified</span></th>
                </tr>
            </thead>
            <tbody md-body> 
                <tr md-row md-select="product" md-select-id="product._id" data-ng-repeat="product in products.data | filter:search | limitTo: query.limit: (query.page - 1) * query.limit | orderBy: query.order" ng-click="read(product._id)">
                    <td md-cell>[{{product.upiType}}] {{product.identifier}}</td>
                    <td md-cell>{{product.name}}</td>
                    <td md-cell>{{product.manufacturer}}</td>
                    <td md-cell>{{product.lastModified | date:'dd/MM/yyyy'}}</td>
                </tr>
            </tbody>
        </table>
    </md-table-container>
    <md-table-pagination md-limit="query.limit" md-limit-options="[10, 15, 50, 100]" md-page="query.page" md-total="{{products.count}}" 
                         md-page-select md-label="$parent.label">
    </md-table-pagination>
</md-card>

Thanks.

[ielektronick]

Hm, md-select-id must contain only a property name, e.g. _id, identifier. From documentation for mdSelectId: A unique identifier for the selected item. The identifier must be a property of the item.

[aissaghouti]

Oh! I see... Sorry. I understand now. Many thanks @ielektronick!

[aissaghouti]

Ouch! Sadly, the issue is still there.

[aissaghouti]

Hi @daniel-nagy, any idea on how to fix this? Thanks.

[aissaghouti]

Did anyone find any workaround for this?

[anatoleabe]

Hello @aissaghouti, @daniel-nagy, After small debug of md-data-table.js, I found that this issue is linked to md-row-select with the way the ckeckboxs are created and appended to the data table on loading. If no md-row-select, no issue. To trying to solve this issue, I added a time out in md-data-table.js at the moment the checkbox is created and appended to datatable. See below how I added timeout: