How to add a click event for Swimlane?

[lanpeng]

Hi bryntum team
I am using bryntum Taskboard .In my project , task board has a lot of data ，So there may be some lag on the page. I want to display a portion of the taskboard data by expand or collapse the swimlane. When a certain swimlane is expanded, the data of that swimlane will be displayed, other swimlanes will be collapsed, and the data of other swimlanes will also be remove from the projectModel. That is my idea.
But I encountered some problems. First, my data was requested from the back-end. Can I bind a click event on a swimlane? When user clicks on a swimlane, I can obtain information about that swimlane and then request corresponding data from the back-end based on that swimlane。

[mats]

Have you tried using partial virtualization as seen here?

https://bryntum.com/products/taskboard/examples/bigdataset/

If that doesn't improve the performance, we can discuss adding events that you can listen to: https://github.com/bryntum/support/issues/7136

[lanpeng]

Hi mats,
In the demo you provided, I saw that the taskboard has two properties

virtualize

、

drawOnScroll

, In which version were these two properties added? I am currently using version 5.2.4 and cannot use these properties . It will report an error

[marcio]

Hey lanpeng,

Checking the diff API tool here https://bryntum.com/products/taskboard/docs/api/apidiff

I compared the 5.2.4 with the latest 5.4.0 and the TaskBoardVirtualization was added after the version that you're using, so updating to the latest version is recommended to have those properties.

[lanpeng]

Hi
I tried upgrade the taskboard version to 5.4.0 .but it report some errors .I am using angular and version is 11.2.14. please help me check it.

 tbar:[
 	{
      type: 'SlideToggle',
      color: 'b-green',
      checked: true,
      text: 'Assignee View',
      weight: 600,
      onClick({ value }) {

  }
},
{ type: 'taskfilterfield', placeholder: 'FILTER MILESTONES' },
{
  type: 'textfield',
  placeholder: 'ASSIGNEE',
  lable: 'Assignee',
  icon: 'b-fa b-fa-filter',
  clearable: true,
  hidden: false,
  onChange({ value }) {
    
  }
},
{
  type: 'textfield',
  placeholder: 'REVIEWER',
  lable: 'Reviewer',
  icon: 'b-fa b-fa-filter',
  clearable: true,
  hidden: false,
  onChange({ value }) {
    
  }
},
{
  type: 'Combo',
  placeholder: 'PRIORITY',
  icon: 'b-fa b-fa-filter',
  items: ['High', 'Medium', 'Low'],
  clearable: true,
  onChange({ value }) {
   
  }
},
{
  type: 'date',
  placeholder: 'START DATE',
  icon: 'b-fa b-fa-filter',
  clearable: true,
  onChange({ value }) {
   
  }
},
{
  type: 'date',
  placeholder: 'END DATE',
  icon: 'b-fa b-fa-filter',
  clearable: true,
  onChange({ value }) {

  }
},
{
  type: 'swimlanepickerbutton',
  cls: 'b-self-but',
  text: 'PROJECT',
  // with: '6em',
  onToggleSwimlane({ item }) {
    // console.log(item)
    item.swimlane.hidden = !item.checked;
    // this is what to add below
    let checked = [];
    this.taskBoard.swimlanes.forEach((swimlane) => {
      checked.push(!swimlane.hidden);
    });

    item.parent.firstItem.checked = checked.includes(false) ? false : true;
    // this is what to add above
  },
  onMenuBeforeShow({ source: menu }) {
    if (!this.taskBoard.swimlanes) return;
    menu.items = this.taskBoard.swimlanes.map((swimlane) => ({
      ref: swimlane.id,
      text: StringHelper.encodeHtml(swimlane.text),
      checked: !swimlane.hidden,
      // checked: swimlane.readOnly,
      swimlane,
      onItem: 'up.onToggleSwimlane'
    }));
    // this is what to add below
    // select all button checked
    let checked = [];
    this.taskBoard.swimlanes.forEach((swimlane) => {
      checked.push(!swimlane.hidden);
      // checked.push(swimlane.readOnly);
    });
    menu.insert(
      {
        checked: checked.includes(false) ? false : true,
        text: 'SELECT ALL',
        onItem: ({ item }) => {
          item.parent.items.forEach((i) => {
            this.taskBoard.swimlanes.forEach((swimlane) => {
              swimlane.hidden = !item.checked;
            });
            if (i.swimlane) {
              i.checked = item.checked;
            }
          });
        }
      },
      0
    );
  }
}
 ]

[marcio]

Hey lanpeng,

Could you please share the definitions of the custom types that you're using? A runnable project with that would be awesome and would really help us to debug and inspect what's causing those errors.

[lanpeng]

Hi marcio.
I uploaded a runnable test case.Please check it. You can upgrade taskboard version to latest ，and then you will see those errors.

[alex.l]

Hi, you need to use another bundle for Angular 11. Please see https://bryntum.com/products/taskboard/docs/guide/TaskBoard/upgrades/5.3.3#angular-view-engine-wrappers