Dear,
I am currently working on a task that involves a collection of history data. I would like to display this history in a grid when I open any task for editing , but error
historyGrid[0].store.loadData is not a function
.
Could you please advise me on what I need to correct in my implementation to successfully pass the historical data and display it in the grid? Your expertise on this matter would be greatly appreciated.
i have attched the taskboard code and event handler i have used .
const taskBoard = window.taskBoard = new TaskBoard({
//appendTo: 'container',
project,
useDomTransition: true,
columnField: 'status', // Default group by 'status'
autoGenerateColumns: false,
autoGenerateSwimlanes: false,
stickyHeaders: true,
autoUpdateRecord: true,
columns: [
{ id: 'notstarted', text: localization.taskBoard.notStarted , color: 'blue' },
{ id: 'inprogress', text: localization.taskBoard.inProgress, color: 'amber' },
{ id: 'review', text: localization.taskBoard.review, color: 'teal' },
{ id: 'completed', text: localization.taskBoard.completed, color: 'green' }
],
swimlanes: [
{ id: 'high', text: localization.taskBoard.high, color: 'red' },
{ id: 'medium', text: localization.taskBoard.medium, color: 'orange' },
{ id: 'low', text: localization.taskBoard.low, color: 'green' },
],
columnField: 'status',
swimlaneField: 'priority',
collapseTitle: true,
features: {
columnHeaderMenu: {
items: {
addTask: false,
}
},
columnDrag: true,
taskDrag: false,
taskEdit: {
editorConfig: {
modal: true,
closable: true,
autoUpdateRecord: false,
defaults: {
labelWidth: '150px', // Set a fixed width for labels
style: 'padding: 10px; font-size: 14px;'
},
width: '53em',
cls: 'assignmenteditor'
},
items: {
column: false,
color: false,
swimlane: null,
description: null,
resources: null,
name: null,
tabpanel: {
type: 'tabpanel',
style: 'padding: 10px;',
items: [
{
title: localization.taskBoard.taskinfotab,
style: 'padding: 10px; background-color: #ffffff; border-radius: 6px; margin-bottom: 15px;',
layout: 'vbox',
align: 'stretch',
items: [
{
type: 'text',
name: 'name',
label: localization.taskBoard.taskInfo.name,
cls: 'disabledfields',
readOnly: true,
labelWidth: '150px', // Ensures consistent label width
style: 'margin-bottom: 10px; width: 100%;'
},
{
type: 'textarea',
name: 'note',
label: localization.taskBoard.taskInfo.note,
cls: 'disabledfields',
readOnly: true,
labelWidth: '150px',
style: 'margin-bottom: 10px; width: 100%;resize: auto;'
},
{
type: 'number',
name: 'duration',
label: localization.taskBoard.taskInfo.duration,
cls: 'disabledfields',
readOnly: true,
labelWidth: '150px',
style: 'margin-bottom: 10px; width: 100%;'
},
]
},
{
title: localization.taskBoard.taskupdatetab,
style: 'padding: 10px; background-color: #ffffff; border-radius: 6px;',
layout: 'vbox',
align: 'stretch',
items: [
{
type: 'textarea',
name: 'assignmentnote',
label: localization.taskBoard.assignmentInfo.assignmentNote,
labelWidth: '150px',
style: 'margin-bottom: 10px; width: 100%;resize: auto;'
}
]
},
{
title: localization.taskBoard.taskupdatetab,
style: 'padding: 10px; background-color: #ffffff; border-radius: 6px;',
layout: 'vbox',
align: 'stretch',
items: [
{
type: 'grid',
ref:'historyGrid',
name: 'history',
store: {
fields: ['ChangeType', 'Before', 'After', 'CreationDate'],
data: []
},
columns: [
{ text: 'Change Type', field: 'ChangeType', width: 200 },
{ text: 'Before', field: 'Before', width: 150 },
{ text: 'After', field: 'After', width: 150 },
{ text: 'Date', field: 'CreationDate', width: 200, type: 'date', format: 'YYYY-MM-DD HH:mm' }
]
}
]
}
]
}
}
,
}
},
tbar: [
{
type: 'taskfilterfield',
cls: 'task-filter',
tooltip: localization.taskBoard.searchTooltip
},
{
text: localization.taskBoard.autoUpdate,
icon: 'b-fa-sync',
pressedIcon: 'b-fa-check-circle',
pressed: false,
toggleable: true,
tooltip: localization.taskBoard.autoUpdateTooltip,
onToggle({ pressed }) {
taskBoard.features.taskEdit.editorConfig.autoUpdateRecord = pressed;
},
cls: 'auto-update-btn'
},
{
type: 'columnpickerbutton',
tooltip: localization.taskBoard.columnPickerTooltip,
cls: 'column-picker-btn'
},
'->',
{
type: 'button',
text: localization.taskBoard.saveChangesTooltip,
icon: 'b-fa-save', // Save icon
cls: 'save-button toolbar-right',
tooltip: localization.taskBoard.saveChangesTooltip,
onClick: async () => {
await Savechanges();
}
},
{
type: 'button',
ref: 'addButton',
text: localization.taskBoard.submitTooltip,
icon: 'b-fas b-fa-paper-plane',
cls: 'submit-button toolbar-right',
tooltip: localization.taskBoard.submitTooltip,
onClick: () => {
console.log('Submit button clicked');
}
}
],
headerItems: {
text: { field: 'name' },
},
footerItems: {
resourceAvatars: false,
},
});taskBoard.on('beforeTaskEdit', ({ source: taskBoard, taskRecord }) => {
console.log('beforeTaskEdit triggered for task', taskRecord);
const taskEditor = taskBoard.features.taskEdit;
if (taskEditor) {
// Access the taskEdit items to find the tabpanel
const tabPanel = taskEditor.items.tabpanel;
if (tabPanel) {
// Now access the history grid inside the tabpanel's items
const historyGrid = tabPanel.items[2].items;
if (historyGrid && taskRecord.history) {
// Load the taskRecord.history into the history grid
historyGrid[0].store.loadData(taskRecord.history)
} else {
console.error('History grid or taskRecord.history not found');
}
} else {
console.error('TabPanel not found');
}
} else {
console.error('Task editor is not available');
}
});
