JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Kanban Kanban – not showing tasks on initial display

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #101934
    davout
    Member
    Up
    0
    Down

    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.
     
     

    #101937
    yavordashew
    Member
    Up
    0
    Down

    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/

    #101939
    davout
    Member
    Up
    0
    Down

    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.
    
    #101940
    davout
    Member
    Up
    0
    Down

    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>
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.