Our flexible Kanban board for managing tasks with drag drop


Post by tmcuong »

In taskboard when I create new task, web page do not scroll to bottom, otherwise It scroll to top of the taskboard, I don't know what is the problem.


Post by alex.l »

Hi tmcuong,

Please, provide steps to reproduce! On what demo are you able to reproduce this? I tried here https://bryntum.com/examples/taskboard/basic/ and it works great.

All the best,
Alex


Post by tmcuong »

Please see me code below:

in HTML

 <bryntum-task-board   
#taskboard </bryntum-task-board>

in file .ts

 @ViewChild(BryntumTaskBoardComponent, { static : false }) taskboardComponent: BryntumTaskBoardComponent;  
private taskboard: TaskBoard; constructor( ) {
this.config();
} ngAfterViewInit(): void {
this.taskboard = this.taskboardComponent.instance;
this.taskboard.setConfig(this.taskBoardConfig);
} config() {
var that = this; this.taskBoardConfig = {
useDomTransition : false, stickyHeaders : true, showCollapseInHeader : false,
swimlanes : [ // id is used to match tasks, text is displayed in swimlanes header { id : 'critical', text : 'Critical!!', color : 'red' }, { id : 'high', text : 'High', color : 'deep-orange' }, { id : 'medium', text : 'Medium', color : 'orange' }, // Display more tasks per row in the Low lane { id : 'low', text : 'Low', color : 'light-green', tasksPerRow : 3 } ], swimlaneField : 'prio', features : { columnDrag : true, swimlaneDrag : true, taskTooltip : true, columnToolbars : { // By default it displays a bottom toolbar (bbar) with an add button. // Here we also add a top toolbar with the same button topItems : { addTask : true }, // Using processItems it is possible to affect the items at runtime. // We use it here to hide the add task button in the Done column processItems({ items, columnRecord, location }) { if (columnRecord.id === 'done') { items.addTask = false; } } }, columnHeaderMenu : true, taskMenu : { items : { removeTask : null, resources : null, flagTask : { text : 'Flag task', icon : 'b-fa-fw b-fa-flag', onItem({ taskRecord }) { taskRecord.flagged = true; alert('flagTask'); } }, deleteTask : { text : 'Delete task', icon : 'b-fa-fw b-fa-flag', onItem({ taskRecord, source }) { source.project.taskStore.remove(taskRecord); } }, // Add a custom menu item with a color picker sub menu color : { icon : 'b-fa-fw b-fa-square', // Adds a separator line above, for nicer look cls : 'b-separator', text : 'Color', // Move close to the top weight : 150, menu : { // Each color gets an item, the key is used as the items `ref` which on purpose matches a // predefined color. Makes it easy to apply the color in the listener below red : { text : 'Red', icon : 'b-fa-fw b-fa-square b-taskboard-color-red' }, pink : { text : 'Pink', icon : 'b-fa-fw b-fa-square b-taskboard-color-pink' }, purple : { text : 'Purple', icon : 'b-fa-fw b-fa-square b-taskboard-color-purple' }, 'deep-purple' : { text : 'Deep purple', icon : 'b-fa-fw b-fa-square b-taskboard-color-deep-purple' }, indigo : { text : 'Indigo', icon : 'b-fa-fw b-fa-square b-taskboard-color-indigo' }, blue : { text : 'Blue', icon : 'b-fa-fw b-fa-square b-taskboard-color-blue' }, 'light-blue' : { text : 'Light blue', icon : 'b-fa-fw b-fa-square b-taskboard-color-light-blue' }, cyan : { text : 'Cyan', icon : 'b-fa-fw b-fa-square b-taskboard-color-cyan' }, teal : { text : 'Teal', icon : 'b-fa-fw b-fa-square b-taskboard-color-teal' }, green : { text : 'Green', icon : 'b-fa-fw b-fa-square b-taskboard-color-green' }, 'light-green' : { text : 'Light green', icon : 'b-fa-fw b-fa-square b-taskboard-color-light-green' }, lime : { text : 'Lime', icon : 'b-fa-fw b-fa-square b-taskboard-color-lime' }, yellow : { text : 'Yellow', icon : 'b-fa-fw b-fa-square b-taskboard-color-yellow' }, amber : { text : 'Amber', icon : 'b-fa-fw b-fa-square b-taskboard-color-amber' }, orange : { text : 'Orange', icon : 'b-fa-fw b-fa-square b-taskboard-color-orange' }, 'deep-orange' : { text : 'Deep orange', icon : 'b-fa-fw b-fa-square b-taskboard-color-deep-orange' } }, // Apply picked color to the task onItem({ item, taskRecord }) { taskRecord.eventColor = item.ref; } }, // Add another custom item with a label picker labels : { icon : 'b-fa-fw b-fa-tags', text : 'Labels', // Create a sub menu with one item per label, starting unchecked menu : that.availableLabels.map(label => ({ text : label, checked : false })), // Move below weight : 160, // When clicking an item, all checked items are collected and turned into a labels string applied // to the task record onItem({ item, taskRecord }) { const checkedLabels = []; // Iterate over all label items item.parent.items.forEach(item => { // Collecting the text of the checked ones if (item.checked) { checkedLabels.push(item.text); } }); // Convert the array from above into a comma separated labels string and update the record // with it taskRecord.labels = checkedLabels.join(','); } } }, // Function called before showing the menu, allows modifying the items processItems({ taskRecord, columnRecord, items }) { } }, taskEdit : { // edit task processItems({ items, taskRecord, columnRecord, swimlaneRecord }) { items.name.label = taskRecord.type === 'task' ? 'Task' : 'Issue'; that.editingRecord = taskRecord; that.openDialog(that.contentPopup); items.column = false; }, editorConfig : { // Will make it anchor to the task being edited centered : false, // Display it without masking the rest of the page modal : false }, items : { } } }, headerItems : { menu : { type : 'taskMenu' } }, footerItems : { resourceAvatars : null }, columns : [ 'todo', 'doing', 'done', 'will' ], // configPanel: { // } , // Field used to pair a task to a column //columnField : 'status', columnField : 'status', // bodyItems : { // tags : { type : 'tags' } // }, // Project using inline data project : { validateResponse : true, autoLoad : true, // taskStore : { // fields : [ // { name : 'labels' }, // { name : 'category', defaultValue : 'Bug' }, // { name : 'description', defaultValue : 'No description yet' } // ] // }, tasksData : [ { "id" : 1, "name" : "Bug with rendering", "description" : "Try it on any demo, reproduces easily", "status" : "review", "prio" : "medium" }, { "id" : 2, "name" : "Add button to toolbar", "description" : "Should look like a proper button, must be clickable", "status" : "done", "prio" : "low" }, { "id" : 3, "name" : "Remove overflow", "description" : "It is overflowing everywhere, it should not", "status" : "doing", "prio" : "medium" }, { "id" : 4, "name" : "Test in Safari", "description" : "Also remember to test on IOS", "status" : "doing", "prio" : "low" }, { "id" : 5, "name" : "Write tests", "description" : "Boss says we have to, better get started soon since test coverage is approximately 5%", "status" : "done", "prio" : "high" }, { "id" : 6, "name" : "Refactor base class", "description" : "It is currently a mess, un-mess it please", "status" : "todo", "prio" : "low" }, { "id" : 7, "name" : "Update themes", "description" : "All themes need an overhaul, marketing is not happy with their current state", "status" : "todo", "prio" : "medium" }, { "id" : 8, "name" : "De-nest CSS", "description" : "It is practically impossible to override any selector, needs a major de-nesting", "status" : "todo", "prio" : "medium" }, { "id" : 9, "name" : "Compile using esbuild", "description" : "So quick you will think it did not do anything...", "status" : "doing", "prio" : "medium" }, { "id" : 10, "name" : "Reconfigure grunt", "description" : "Better ask DevOps to handle it", "status" : "doing", "prio" : "high" }, { "id" : 11, "name" : "Upgrade babel", "description" : "Need support for the latest syntax, devs go on and on about it", "status" : "doing", "prio" : "low" }, { "id" : 12, "name" : "Install yarn", "description" : "Another task for DevOps", "status" : "done", "prio" : "medium" }, { "id" : 13, "name" : "Replace var usages", "description" : "Makes us look old", "status" : "done", "prio" : "low" }, { "id" : 14, "name" : "Review PR", "description" : "Why?", "status" : "todo", "prio" : "high" }, { "id" : 15, "name" : "Submit issue", "description" : "Which one? Have logged thousands", "status" : "done", "prio" : "medium" }, { "id" : 16, "name" : "Fix xss vulnerabilities", "description" : "Really important this one", "status" : "review", "prio" : "critical" }, { "id" : 17, "name" : "Apply destructuring", "description" : "Will shave 100k of our bundle, since we have many many vars", "status" : "todo", "prio" : "medium" }, { "id" : 18, "name" : "Remove deprecated API", "description" : "Josh says he deprecated it in last major, better verify it first", "status" : "todo", "prio" : "medium" }, { "id" : 19, "name" : "Upgrade ES5 syntax", "description" : "Really hard looping new devs in when they cant use the shiny new stuff", "status" : "done", "prio" : "high" }, { "id" : 20, "name" : "Review package.json", "description" : "Should it really be 1000+ lines?", "status" : "doing", "prio" : "medium" }, { "id" : 21, "name" : "Try flutter", "description" : "It is trendy, lets try it", "status" : "done", "prio" : "low" }, { "id" : 22, "name" : "Evaluate WebFlow", "description" : "Our WordPress based site could use an upgrade", "status" : "todo", "prio" : "low" } ], }, taskRenderer({ cardConfig, taskRecord }) { } } }

Post by alex.l »

Thanks for the test case, there is a bug with positioning when using stickyHeaders. Here is a ticket https://github.com/bryntum/support/issues/3827

All the best,
Alex


Post by tmcuong »

When bug fixed please let me know. thanks .


Post by alex.l »

You can subscribe on ticket updates on GitHub to be notified directly when it's updated.

All the best,
Alex


Post by tmcuong »


Post Reply