Hey rodel.ocfemia,
We'll be waiting for your demo to assist you better.
Hi marcio,
Please find code below. Basically there is expand/collapse functionality. When the card is in expanded mode, double click on the status to change the status. Once the status is changed, the card moves accordingly. However, the collapse (red) should remain unchanged. But once the card moves, it changes back to Expand (blue). I'm trying to figure out how can I make the icon still Collapse(red) when I changed the status. Thanks
index.umd.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="This example shows basic setup of the TaskBoard."/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Bryntum TaskBoard - Basic demo</title>
<script src="../_shared/browser/helper.js?460834"></script>
<link rel="stylesheet" href="../../build/taskboard.stockholm.css?460834" data-bryntum-theme>
<link rel="stylesheet" href="../_shared/shared.css?460834">
<link rel="stylesheet" href="resources/app.css?460834">
</head>
<style>
.expand {
border: 1px solid blue;
background-color: blue;
height: 15px;
width: 50px;
color: white;
}
.expand::before {
content: "Expand"
}
.collapse {
border: 1px solid red;
background-color: red;
height: 15px;
width: 50px;
color: white;
}
.collapse::before {
content: "Collapse"
}
</style>
<body>
<div id="container">
</div>
<!-- Using UMD bundle -->
<script src="../_shared/locales/examples.locales.umd.js?460834"></script>
<script data-default-locale="En" src="../../build/taskboard.umd.min.js?460834"></script>
<script src="../_shared/shared.umd.js?460834"></script>
<script src="app.umd.js?460834"></script>
</body>
</html>
app.umd.js
'use strict';
var { TaskBoard} = bryntum.taskboard;
var taskBoard = new TaskBoard({
appendTo : 'container',
// Url for resource avatar images
resourceImagePath : '../_shared/images/users/',
// Experimental, transition moving cards using the editor
useDomTransition : true,
// Columns to display
columns : [{
id : 'todo',
text : 'Todo',
color : 'orange'
}, {
id : 'doing',
text : 'Doing',
color : 'blue',
tooltip : 'Items that are currently in progress'
}, {
id : 'done',
text : 'Done'
}],
// Field used to pair a task to a column
columnField : 'status',
// Project using inline data
taskStore: { fields: ['showStatus', 'showField1', 'showField2'] },
headerItems: {
text: {
type: 'template',
template: ({ taskRecord }) => `<table style="width:100%;">
<tr>
<td style="width:5%;"><div class="expand"></div></td>
<td style="width:95%;">${taskRecord.name}</td>
</tr>
</table>`,
style: { width: '100%' }
}
},
features: {
simpleTaskEdit : true,
taskEdit: false
},
bodyItems: {
status : {
type : 'template',
hidden : true,
template : ({ taskRecord }) => `<div>Status: ${taskRecord.status}</div>`,
editor : { type : 'combo', items : ['todo','doing', 'done'] }
},
field1: { type: 'template', hidden: true, template: ({ taskRecord }) => `<div><b>${taskRecord.field1}</b></div>` },
field2: { type: 'template', hidden: true, template: ({ taskRecord }) => `<div><b>${taskRecord.field2}</b></div>` },
},
project : {
tasks : [{
id : 1,
name : 'Book flight',
status : 'todo',
prio : 'medium',
field1 : 'field1',
field2 : 'field2'
}, {
id : 2,
name : 'Book hotel',
status : 'todo',
prio : 'medium',
field1 : 'field1',
field2 : 'field2'
}, {
id : 3,
name : 'Pack bags',
status : 'doing',
prio : 'low',
field1 : 'field1',
field2 : 'field2'
}]
},
processItems({ bodyItems, taskRecord }) {
bodyItems.status.hidden = !taskRecord.showStatus;
bodyItems.field1.hidden = !taskRecord.showField1;
bodyItems.field2.hidden = !taskRecord.showField2;
},
listeners: {
}
});
taskBoard.on({
taskClick({ taskRecord, event }) {
if (event.target.classList.contains('expand') ) {
event.target.classList.remove('expand')
event.target.classList.add('collapse')
taskRecord.showStatus = true
taskRecord.showField1 = true
taskRecord.showField2 = true
return;
}
if (event.target.classList.contains('collapse') ) {
event.target.classList.remove('collapse')
event.target.classList.add('expand')
taskRecord.showStatus = false
taskRecord.showField1 = false
taskRecord.showField2 = false
return;
}
}
});
Hi,
The taskClick is working from my end. When Expand is clicked, the other fields are displayed, plus the Expand disappears and Collapse appears. Then vice versa. My only concern is when in collapse mode then i changed the status, the card moves accordingly but the Collapse is reset to Expand while other fields are still displayed.
Hey rodel.ocfemia,
I'm attaching a video to demonstrate the behavior that I've found using your code. At least as far as I understood, it's working correctly. Could you confirm if I tested it correctly??
Best regards,
Márcio
Hi marcio,
You might be thinking why create status drop down if we can just drag the card. But currently we need to display several types of status then it has mapping to the main 3 status. For example Status1 is mapped to 'todo'. So if I changed status to Status1, the card should move automatically to 'todo'.
Hi rodel,
Sorry for the delay, but I'm here with good news. I'm sharing a piece of code with a working application just like you mentioned, we always recommend avoid editing DOM nodes directly as you shared earlier, to avoid that kind of situation, the problem was being caused on this line
<td style="width:5%;"><div class="expand"></div></td>
As the default after a render would be always be the expand class, that's why I updated to have a check there with the collapse class as well, check it here
"use strict";
var { TaskBoard } = bryntum.taskboard;
var taskBoard = new TaskBoard({
appendTo: "container",
// Url for resource avatar images
resourceImagePath: "../_shared/images/users/",
// Experimental, transition moving cards using the editor
useDomTransition: true,
// Columns to display
columns: [
{
id: "todo",
text: "Todo",
color: "orange",
},
{
id: "doing",
text: "Doing",
color: "blue",
tooltip: "Items that are currently in progress",
},
{
id: "done",
text: "Done",
},
],
// Field used to pair a task to a column
columnField: "status",
// Project using inline data
taskStore: { fields: ["showStatus", "showField1", "showField2"] },
headerItems: {
text: {
type: "template",
template: ({ taskRecord }) => {
const classToAdd = taskRecord.showStatus ? "collapse" : "expand";
return `<table style="width:100%;">
<tr>
<td style="width:5%;"><div class="${classToAdd}"></div></td>
<td style="width:95%;">${taskRecord.name}</td>
</tr>
</table>`;
},
style: { width: "100%" },
},
},
features: {
simpleTaskEdit: true,
taskEdit: false,
},
bodyItems: {
status: {
type: "template",
hidden: true,
template: ({ taskRecord }) => `<div>Status: ${taskRecord.status}</div>`,
editor: { type: "combo", items: ["todo", "doing", "done"] },
},
field1: {
type: "template",
hidden: true,
template: ({ taskRecord }) => `<div><b>${taskRecord.field1}</b></div>`,
},
field2: {
type: "template",
hidden: true,
template: ({ taskRecord }) => `<div><b>${taskRecord.field2}</b></div>`,
},
},
project: {
tasks: [
{
id: 1,
name: "Book flight",
status: "todo",
prio: "medium",
field1: "field1",
field2: "field2",
},
{
id: 2,
name: "Book hotel",
status: "todo",
prio: "medium",
field1: "field1",
field2: "field2",
},
{
id: 3,
name: "Pack bags",
status: "doing",
prio: "low",
field1: "field1",
field2: "field2",
},
],
},
processItems({ bodyItems, taskRecord }) {
bodyItems.status.hidden = !taskRecord.showStatus;
bodyItems.field1.hidden = !taskRecord.showField1;
bodyItems.field2.hidden = !taskRecord.showField2;
},
listeners: {},
});
taskBoard.on({
taskClick({ taskRecord, event }) {
if (event.target.classList.contains("expand")) {
taskRecord.showStatus = true;
taskRecord.showField1 = true;
taskRecord.showField2 = true;
return;
}
if (event.target.classList.contains("collapse")) {
taskRecord.showStatus = false;
taskRecord.showField1 = false;
taskRecord.showField2 = false;
return;
}
},
});
Best regards,
Márcio