Kanban – not showing tasks on initial display

[davout]

I 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.
 
 

[yavordashew]

Hi 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/

[davout]

I 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.

[davout]

I’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>

[Author]

Posts