Open aissaghouti opened 7 years ago
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>
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.
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.
Oh! I see... Sorry. I understand now. Many thanks @ielektronick!
Ouch! Sadly, the issue is still there.
Hi @daniel-nagy, any idea on how to fix this? Thanks.
Did anyone find any workaround for this?
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:
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: