Our flexible Kanban board for managing tasks with drag drop


Post by suhas.kachare »

Hi Team ,

Does TaskBoard have a task Highlighting feature ?

Please find below attached video for your reference

Attachments
Screen Recording 2023-02-27 at 7.04.00 PM.mov
(6.28 MiB) Downloaded 34 times

Post by tasnim »

Hi,

There is a highlight method in docs https://bryntum.com/products/taskboard/docs/api/Core/helper/DomHelper#function-highlight-static

This is how it looks

chrome_t3biSDwtsZ.gif
chrome_t3biSDwtsZ.gif (309.4 KiB) Viewed 899 times

Or Are you looking for filtering?


Post by suhas.kachare »

No, I'm not looking for filtering. As you can find in the video I attached, whenever I searched for any particular task, that specific task got highlighted, and all other tasks got greyed out.


Post by Animal »

See how this example does it: https://bryntum.com/products/scheduler/examples/filtering/

It's a Scheduler example. but the principle is exactly the same. Mutate the class list on matched and unmatched tasks so that your styling applies or does not apply.


Post by suhas.kachare »

Taking the above example as a reference, I tried implementing the code for taskboard, but it's not working for me.

Can you please guide me to where I'm making a mistake?

Below is my code

 tbar: [ {
        type: "textfield",
        ref: "highlight",
        placeholder: "Highlight tasks",
        clearable: true,
        keyStrokeChangeDelay: 100,
        triggers: {
          filter: {
            align: "start",
            cls: "b-fa b-fa-search",
          },
        },
        onChange(event) {
          const {
            source: {
              parent: { parent: taskBoard },
            },
            value,
          } = event;

      taskBoard.project.eventStore.forEach((task) => {
        const taskClassList = new DomClassList(task.cls);

        if (value !== "" && task.name.toLowerCase().includes(value.toLowerCase())) {
          taskClassList.add("b-match");
        } else {
          taskClassList.remove("b-match");
        }

        task.cls = taskClassList.value;
      });

      taskBoard.element.classList[value.length > 0 ? "add" : "remove"]("b-highlighting");
    },
  }]

Post by Animal »

Have you tried setting a breakpoint inside your onChange function?


Post by suhas.kachare »

Yes I did . I found that all the values are getting set properly, but still it's not working.


Post by Animal »

So you're adding the b-match class where you want and removing it where not needed?

And the class then makes its way onto the task's card element?


Post by Animal »

Looks like a bug in TaskBoard. The task record's cls field is not applied to the card in the UI.

Here's a ticket: https://github.com/bryntum/support/issues/6273


Post by Animal »

I have a fix for it, I will try to persuade the gatekeeper to allow this into the codebase for the upcoming release. Then setting the cls field of a task will mean that class is applied to the card.


Post Reply