JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › Smart.Sortable
Tagged: sortable
- This topic has 3 replies, 2 voices, and was last updated 1 year, 7 months ago by svetoslav_borislavov.
-
AuthorPosts
-
February 22, 2023 at 9:45 pm #104425Matias GalanteParticipant
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>February 23, 2023 at 8:49 am #104428svetoslav_borislavovParticipantHi,
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 problemBest Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/February 23, 2023 at 9:31 pm #104430Matias GalanteParticipantI 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
February 24, 2023 at 4:48 am #104431svetoslav_borislavovParticipantHi,
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.htmlIf you face any further problems, do not hesitate to contact us!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.