[VUE 3] - Filter tasks only in taskboard when having multiple products

[pedromeireless]

Hi!

I'm using Gantt + Taskboard in my project. We have a rule that "root tasks" (WBS Code 1, 2, 3 ...) should not appear in the taskboard. I've tried to use TaskRenderer and set display: none, it actually works, but it keeps showing the total count of tasks aside the column name.

My question is, how can I filter the tasks in the taskboard when the component is mounted?

Bryntum Version

"@bryntum/core-thin": "5.6.0",
    "@bryntum/core-vue-3-thin": "5.6.0",
    "@bryntum/engine-thin": "5.6.0",
    "@bryntum/gantt-thin": "5.6.0",
    "@bryntum/gantt-vue-3-thin": "5.6.0",
    "@bryntum/grid-thin": "5.6.0",
    "@bryntum/scheduler-thin": "5.6.0",
    "@bryntum/schedulerpro-thin": "5.6.0",
    "@bryntum/schedulerpro-vue-3-thin": "5.6.0",
    "@bryntum/taskboard-thin": "5.6.0",
    "@bryntum/taskboard-vue-3-thin": "5.6.0",

[marcio]

Hey pedromeireless,

That will depend on how you set up your project, if you could provide a sample, that would be great to assist you.

You can try to filter only on Taskboard project, something like this:

taskboard.project.taskStore.addFilter()

Where taskboard is your Taskboard instance.

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

[pedromeireless]

I have a single project, shared by gantt and kanban.

It looks like this:

export default class Schedule extends ProjectModel {
  constructor() {
    super({
      autoSync: true,
      autoLoad: true,
      transport: {
        load: {
          url: ``,
          credentials: "omit",
          headers: {
          },
        },
        sync: {
          url: ``,
          credentials: "omit",
          headers: {
            Authorization: authToken,
          },
        },
      },
      taskStore: {
 
    },
  },
  onLoad({ source }: any) {
  },
});
  }
}

And I have the configuration binded to the components

  bryntum-gantt(
    ref="gantt"
    :project="schedule"
    v-bind="ganttConfig"
  )
  bryntum-splitter()
  bryntum-task-board(
    ref="taskboard"
    :project="schedule"
    v-bind="taskboardConfig"
  )

How can I create a filter to apply only in the taskboardConfig options?

[marcio]

Hey,

For that, you can use a chained store in the taskboard. Please check our documentation https://bryntum.com/products/taskboard/docs/api/Core/data/mixin/StoreChained

Would be something like this

bryntum-task-board(
    ref="taskboard"
    :project="schedule"
    v-bind="taskboardConfig"
    :taskStore="chainedTaskStore"
  )

[pedromeireless]

It doesn't worked well. It's actually filtering the way I want, but the taskboard it is still showing all the records, like if ignores the filter. Should I do something after passing the chained task store?

// TaskInterface is just for typing issues. It extends from TaskModel;
// Filtering root tasks, those who does not have a parentId;
// Schedule == ProjectModel

  chainedTaskStore = schedule.taskStore.chain(
    (record: TaskInterface) => !record.parentId,
  ) as unknown as TaskInterface[];

  bryntum-task-board(
    ref="taskboard"
    :project="schedule"
    v-bind="taskboardConfig"
    :task-store="chainedTaskStore"
  )
  

This is my taskboard after filtering. Still showing the WBS 1 and 2 (root). Should I do something in my taskboardConfig? As you can see, the return of the chainedStore is working (allRecords == 2).

taskboard after filtering

Captura de tela de 2023-11-08 08-56-06.png (62.5 KiB) Viewed 831 times

[alex.l]

Hi,

That happened because you specified both: full project and task store separately. In case you need to have different dataset, you can't share project, you need to use separated project instance and chain all stores you need.