Kanban with Data Adapter – Tasks are not loaded

[LirPe]

Hi,

I’m trying to evaluate the Kanban Component and use it inside our AngularJS project. I copied the Kanban example for server side CRUD  from your site. I have a function which returns promise with the data. I’m calling that function inside the ‘virtualDataSource’ property instead on the DemoServer.GetData function from the example. The function is called and the data array is returned but I receive an error inside smart.elements.js file that indicated that dataSource is undefined or null.

I tried many combinations for loading the data and call the resultCallbackFunction with the result of the promise but with no luck. The page is empty and the tasks are not rendered. The docs are unclear with the situation I’m facing.

This is how the Kanban is instantiated:

window.Smart(‘#kanban’, class {
get properties() {
return {
addNewButton: true,
currentUser: ‘1’,
dataSource: new window.Smart.DataAdapter({
virtualDataSource: async function (resultCallbackFunction, details) {
if (details.action === ‘dataBind’) {

const result = await getAsyncData(details);

resultCallbackFunction({
dataSource: result.data,
lastId: result.lastId,
virtualDataSourceLength: result.length
});

}
else {
const result = await someAsyncCRUDFunction(details);
resultCallbackFunction({
dataSource: result.data,
lastId: result.lastId,
virtualDataSourceLength: result.length
});
}
},
dataFields: [
‘id: number’,
‘status: string’,
‘text: string’,
‘tags: string’,
‘priority: string’,
‘progress: number’,
‘startDate: date’,
‘dueDate: date’,
‘userId: string’,
‘comments: any’
],
id: ‘id’
}),
editable: true,
headerPosition: ‘top’,
taskActions: true,
taskComments: true,
taskDue: true,
taskProgress: true,
textTemplate: function (settings) {
settings.template = <span class="smart-badge smart-badge-dark">${settings.data.id}</span>${settings.text};
},
userList: true,
users: [
{ id: ‘0’, name: ‘Andrew’, image: ‘../../images/people/andrew.png’ },
{ id: ‘1’, name: ‘Anne’, image: ‘../../images/people/anne.png’, allowComment: true },
{ id: ‘2’, name: ‘Janet’, image: ‘../../images/people/janet.png’ },
{ id: ‘3’, name: ‘John’, image: ‘../../images/people/john.png’ },
{ id: ‘4’, name: ‘Laura’, image: ‘../../images/people/laura.png’ }
],
columns: [
{ label: ‘To do’, dataField: ‘toDo’ },
{ label: ‘In progress’, dataField: ‘inProgress’ },
{ label: ‘Testing’, dataField: ‘testing’ },
{ label: ‘Done’, dataField: ‘done’, addNewButton: false }
]
};
}
});

This is the Server side Promise data:

function getAsyncData(request) {

console.log(“in getAsyncData”, request);

return $scope.invokeCO(“getKanban”, {}).then(function (invokeCoRes) {
$scope.variables.knbnData = invokeCoRes.data.operationResult.data;

return {
data: $scope.variables.knbnData,
lastId: 21000000,
length: $scope.variables.knbnData.length
};
});

}

Your advice is highly appreciated.

 

[admin]

Hi,

Could you share a codepen example, because it would be hard to reproduce by using the provided code part. From ‘dataSource’ is undefined error I would guess that some kind of function context is not right which could be because of the async/await usage in the provided code.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts