We need newest task at top, rather than newest task at bottom.

[stewart_wo]

We set the initial newTaskDefaults.weight to 99, which works fine for the first task created.
However, when we change the weight to 98 after the first task is created, this new value doesn’t apply to subsequent tasks. Even after setting newTaskDefaults.weight to 98, when the user clicks the + button again, new tasks still default to the original weight of 99 instead of 98.

config file code

newTaskDefaults: { 
  weight: 99
},

component code

      taskStore: {
        reapplySortersOnAdd : true,
         onAdd(props){
            const minValue = taskBoard.project.taskStore.min('weight');
            taskBoard.newTaskDefaults.weight = minValue - 1;              

        }},

Could you please provide an example in Angular where the newTaskDefaults config works correctly?

[ghulam.ghous]

Hey please check out the below example in angular:

    newTaskDefaults      : {
        weight : 99
    },
    taskStore : {
        reapplySortersOnAdd : true,
    },

and in the component file:

    ngAfterViewInit() : void {
        // Store taskBoard and project instance
        this.taskBoard = this.taskBoardComponent.instance;
        this.project   = this.projectComponent.instance;

        // @ts-ignore
        this.taskBoard.project.taskStore.on('add', () => {
            // @ts-ignore
            const minValue = this.taskBoard.project.taskStore.min('weight');
            // @ts-ignore
            this.taskBoard.newTaskDefaults.weight = minValue - 1;
        });
    }

example.zip

(737.6 KiB) Downloaded 30 times

Screen Recording 2024-11-13 at 3.04.06 PM.mov

(25.66 MiB) Downloaded 31 times

[stewart_wo]

This is not working in our Angular application; we can't catch the add event in ngAfterViewInit.

    ngAfterViewInit() : void {
        // Store taskBoard and project instance
        this.taskBoard = this.taskBoardComponent.instance;
        this.project   = this.projectComponent.instance;

    // @ts-ignore
    this.taskBoard.project.taskStore.on('add', () => {
      console.log('on add event');
    });
}

 

code for reference

HTML code

<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"
  [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"
  [taskMenuFeature]="taskBoardConfig?.features.taskMenu"
  [newTaskDefaults]="taskBoardConfig?.newTaskDefaults"
  (onTaskDrop)="onTaskDropHandle($event)"
  (onColumnDrop)="onColumnDropHandle($event)"
</bryntum-task-board>

component code

import {
  BryntumTaskBoardComponent,
  BryntumProjectComboComponent,
} from '@bryntum/taskboard-angular-thin';
import { TaskBoard } from '@bryntum/taskboard-thin';
import { TaskBoardConfig } from './taskboard.config';


export class AppComponent implements AfterViewInit {

 @ViewChild(BryntumTaskBoardComponent, { static: false })
  taskboardComponent!: BryntumTaskBoardComponent;
  @ViewChild(BryntumProjectComboComponent, { static: true })
  project!: BryntumProjectComboComponent;
  

taskBoardConfig = TaskBoardConfig;
private taskboard!: TaskBoard;

  constructor(
     private cdRef: ChangeDetectorRef,
  ){}


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

    // @ts-ignore
    this.taskBoard.project.taskStore.on('add', () => {
        
        console.log('on add event');
    });
    
     this.getTaskboardData();
     this.cdRef.detectChanges();
}

 }
 
 

config code

export const TaskBoardConfig = {

useDomTransition: true,
  stickyHeaders: true,
  showCollapseInHeader: true,
  showCountInHeader: true,
  tasksPerRow: 1,
  features: {
    columnDrag: true,
    taskDrag: true,
    taskTooltip: false,
    taskMenu: false,
    taskEdit: {},
    columnHeaderMenu: {},
    columnToolbars: {},
  },
  headerItems : {},
  bodyItems: {},
  footerItems: {},
  

  newTaskDefaults: { 
    weight: 99,
  },

  columns: [],

  // Field used to pair a task to a column
  columnField: 'stage',

  project: {},
  

}

version of taskboard thin package

    "@bryntum/taskboard-angular-thin": "6.0.6",
    "@bryntum/taskboard-thin": "6.0.6",

[ghulam.ghous]

Hey,

we can't catch the add event in ngAfterViewInit.

Any specific reason for not doing this? Because currently there is no built-in support for this. I have provided you a workaround. There is no other way then this. Maybe you can try following the approach mentioned by Johan in one of other posts: viewtopic.php?p=157608#p157608

[Animal]

Should be as easy as

        taskStore: {
            reapplySortersOnAdd : true,
            listeners : {
                add : () => --taskBoard.newTaskDefaults.weight
            }
        }

Just decrement the weight property on every add.