[ANGULAR] Issue with virtualized rendering showing blank boxes after search

[stewart_wo]

We’re using Bryntum TaskBoard in an Angular app with virtualize and drawOnScroll enabled. On initial load, tasks render fine. When we perform a search, we re-call the same API with the search term. The API returns 5 results, but the UI shows 5 empty (white) boxes instead of task cards. This issue only occurs after enabling virtualization and drawOnScroll.

HTML Code

// search button
            <div class="search_box d-flex align-items-center">
              <input
                type="text"
                placeholder="Search..."
                [formControl]="searchText"
              />
              <button
                type="button"
                class="search_sumbit"
                (click)="getTaskboardDealsData()"
              >
               </button>
            </div>
  <bryntum-task-board
    #taskboard
    [project]="taskBoardConfig?.project"
    [stickyHeaders]="taskBoardConfig?.stickyHeaders"
    [showCollapseInHeader]="taskBoardConfig?.showCollapseInHeader"
    [showCountInHeader]="taskBoardConfig?.showCountInHeader"
    [tasksPerRow]="taskBoardConfig?.tasksPerRow"
    [columnDragFeature]="taskBoardConfig?.features?.columnDrag"
    [taskEditFeature]="taskBoardConfig?.features?.taskEdit"
    [taskMenuFeature]="taskBoardConfig?.features?.taskMenu"
    [columnHeaderMenuFeature]="taskBoardConfig?.features?.columnHeaderMenu"
    [taskTooltipFeature]="taskBoardConfig?.features?.taskTooltip"
    [taskDragFeature]="taskBoardConfig?.features?.taskDrag"
    [columnToolbarsFeature]="taskBoardConfig?.features?.columnToolbars"
    [bodyItems]="taskBoardConfig?.bodyItems"
    [headerItems]="taskBoardConfig?.headerItems"
    [footerItems]="taskBoardConfig?.footerItems"
    [columns]="taskBoardConfig?.columns"
    [columnField]="taskBoardConfig?.columnField"
    (onTaskDrop)="onTaskDropHandle($event)"
    (onColumnDrop)="onColumnDropHandle($event)"
    [taskRenderer]="taskBoardConfig?.taskRenderer"
    [virtualize]="true"
    [drawOnScroll]="false"
</bryntum-task-board>

Component Code

  ngAfterViewInit(): void {
  this.taskboard = this.taskboardComponent.instance;
  this.getTaskboardDealsData()
  }
  

   getTaskboardDealsData() {
     // api function 
       this.dealService.getDealsTaskboardData(this.searchText.value ?? '').subscribe({
      next: (response: any) => {
      

  // response
  this.taskboard.project = apiResponse;
  }

[ghulam.ghous]

We are going to need a test case here to reproduce this issue and debug it. Please provide one. Secondly do you see these cards when scrolling or at the end of the scroll because setting this to false, is gonna draw the cards when scroll ends:

Setting this to false will boost scroll performance, but cards scrolled into view will be empty outlines until scrolling ends.

[stewart_wo]

Try to reproduce with this demo

[ghulam.ghous]

Hey,

Replacing a complete project is not the correct approach on Search. You should try using the filter or filterBy on taskStore to filter the results with the search query:

        if(this.searchText.value){
            this.taskBoard.project.taskStore.filterBy(record => record.name.startsWith(this.searchText.value));
        } 

Or if you want to totally replace the project data, use loadInlineData method instead:

https://bryntum.com/products/taskboard/docs/guide/TaskBoard/data/crud_manager_project#load-inline-data
https://bryntum.com/products/taskboard/docs/#Scheduler/model/mixin/ProjectModelMixin#function-loadInlineData

https://bryntum.com/products/taskboard/docs/api/TaskBoard/store/TaskStore#function-filterBy
https://bryntum.com/products/taskboard/docs/api/TaskBoard/store/TaskStore#function-filter

Please try this and let us know if the issue still exists.

[stewart_wo]

When I add this code, we are getting an error.

  if(this.searchText.value){
            this.taskBoard.project.taskStore.filterBy(record => record.name.startsWith(this.searchText.value));
        } 

error
Property 'filterBy' does not exist on type 'TaskStore | TaskStoreConfig'. Did you mean 'filters'?
Property 'filterBy' does not exist on type 'TaskStoreConfig'.

package.json

    "@bryntum/calendar-angular-thin": "6.1.3",
    "@bryntum/calendar-thin": "6.1.3",
    "@bryntum/core-angular-thin": "6.1.3",
    "@bryntum/core-thin": "6.1.3",
    "@bryntum/engine-thin": "6.1.3",
    "@bryntum/grid-thin": "6.1.3",
    "@bryntum/scheduler-thin": "6.1.3",
    "@bryntum/taskboard-angular-thin": "6.1.3",
    "@bryntum/taskboard-thin": "6.1.3",

[alex.l]

Hi,
Should be there https://bryntum.com/products/taskboard/docs/api/TaskBoard/store/TaskStore#function-filterBy

Pls try to cast the type to AjaxStore
https://www.w3schools.com/typescript/typescript_casting.php