JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Kanban › Kanban – not showing tasks on initial display
Tagged: kanban datasource
- This topic has 3 replies, 2 voices, and was last updated 3 years, 2 months ago by
davout.
-
AuthorPosts
-
June 23, 2021 at 5:17 pm #101934
davout
MemberI have a Kanban component that when first displayed does not show the tasks
<smart-kanban class="task-smart-kanban" id="kanban" [collapsible]="collapseColumns" [dataSource]="tasks" [columns]="kanbanColumns" [taskDue]="true" [formatStringDate]="'dd MMM yyyy'" [taskUserIcon]="false" [taskActions]="true" > </smart-kanban>
I have an RxJS subscribe method that retrieves the data asynchronously
this.queryPageSub = this.taskStore.pageOfGdTasks$.pipe( filter((data ) => (data !== null) && (data.tasks?.length > 0)), tap( (aPage) => { const aList = new Array(); if (aPage.tasks.length > 0) { aPage.tasks.forEach((aTask) => { aList.push( { id: aTask.id, dueDate: aTask.scheduledFinish, status: this.getStatus(aTask), text: aTask.name }); }); this.tasks = aList; } else {
this.tasks = null;
} }) ).subscribe();
The data is retrieved and the ‘tasks’ array does have valid values
Any suggestions?
There is a paging mechanism in my web app that allows me to move forward and back. If I go forward and then back again the data is shown.
June 24, 2021 at 11:27 am #101937yavordashew
MemberHi davout,
I have tested a similar case as yours but I wasn’t able to completely reproduce the issue as you do.
However one possible source for this issue can be if you have loaded the SmartKanbanTask before your data is loaded as its asynchronous task.
If you still struggle with this issue it will be best to create a complete code example which reproduces the issue in order to be able to give you a solution about it.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/June 25, 2021 at 7:36 am #101939davout
MemberI have adapted my app to set up a Kanban datasource of one task that is set up as part of the Typescript class as shown below
export class TaskSmartKanbanComponent implements OnInit, OnDestroy, AfterViewInit { @ViewChild('kanban') kanbanComponent: KanbanComponent; // public input properties @Input() viewId: number; @Input() pageSize = 1000; // public properties for Kanban component public kanbanColumns = null; public collapseColumns = true; public tasks = [{ id: 1, dueDate: null, status: '0', text: 'test' } ]; The Kanban shows this one task It simply is not recognizing the updating of the 'datasource' at a later time when my async service call completes I can't find a 'refresh' view model to force the component to redraw itself.
June 25, 2021 at 9:28 am #101940davout
MemberI’ve solved the problem by setting the ‘datasource’ to an observable
<smart-kanban #kanban class="task-smart-kanban" id="kanban" [collapsible]="collapseColumns" [columns]="kanbanColumns" [dataSource]="specialTasks$ | async" [taskDue]="true" [formatStringDate]="'dd MMM yyyy'" [taskUserIcon]="false" [taskActions]="true" > </smart-kanban>
-
AuthorPosts
- You must be logged in to reply to this topic.