Smart.Sortable

[Matias Galante]

Hello,
I’m using the sortable component to drag and drop tiles around but I’m getting some weird behavior when the content to drag around is dynamic. It works if the tiles are hard coded but if I’m waiting for the list of tiles to come back from an api call, the tiles will render but you can’t move them. To solve this I added the *ngIf below which only displays the div and the smart-sortable once the dashboard items list gets set, but then I ran into another issue when I set disable the sortable by default. I only want to drag and drop when I’m in ‘edit’ mode in the app. Elsewhere when the user clicks on edit, I set this.sortable.disabled = false, however the tiles don’t move. In the example code below I included 2 examples. One is where the tiles are hardcoded and the other is dynamic. The hardcoded tiles work as expected. The tiles are disabled when the page loads, if the user clicks on an edit button, the tiles can be dragged around, but the dynamic tiles are not.
<div>
<div><div *ngIf=”dashboard.items.length > 0″ id=”dashboardTileContainer”></div>
<div>  <smart-sortable</div>
<div>    #sortable</div>
<div>    id=”sortable”</div>
<div>    [dragMode]=”‘item'”</div>
<div>    [mode]=”‘horizontal'”</div>
<div>    [disabled]=”true”></div>
<div></div>
<div>    <ng-container *ngFor=”let item of [{id: ‘123’}, {id: ‘456’}, {id: ‘789’}]”></div>
<div>      <div>{{ item.id }}</div></div>
<div>    </ng-container></div>
<div></div>
<div>    <ng-container *ngFor=”let item of dashboard.items”></div>
<div>      <imat-dashboard-tile *ngIf=”!item.deleted” [item]=”item” [mode]=”dashboardMode”></imat-dashboard-tile></div>
<div>    </ng-container></div>
<div></div>
<div>  </smart-sortable></div>
<div></div></div>
</div>
<div></div>
<div>Hope the above helps to understand what the issue is I’m having. Thanks!</div>

[svetoslav_borislavov]

Hi,

Can you please send a whole demo?
You can send a demo project to support@jqwidgets.com
or a complete component’s code here. (app.component.ts & app.component.html)
This way it will be easier to resolve the problem

 

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Matias Galante]

I re-created the issue here: https://stackblitz.com/edit/github-un13v5?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fdashboard.service.ts

The first 6 tiles are based off of your example and the other 6 starting with “School” don’t move when you enable the sortable

[svetoslav_borislavov]

Hi,

You can update the table with its method “updateItems” after the dynamic tiles have been set.
Here is a modified example: https://stackblitz.com/edit/github-un13v5-btzm1s?file=src/app/app.component.html

If you face any further problems, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts