Our flexible Kanban board for managing tasks with drag drop


Post by tmcuong »

I am implementing Taskboard.
but It show empty page (no layout, no data)
Here below my code

<bryntum-task-board
                #taskboard
                (onCellClick) = "onTaskBoardCellClick($event)"
                [listeners] = "taskBoardConfig.listeners"
                tooltip = "My cool Bryntum TaskBoard component",
                (onCatchAll) = "onTaskBoardEvents($event)"               
></bryntum-task-board>
import { BryntumTaskBoardComponent } from '@bryntum/taskboard-angular';
import { DateHelper, EventModel, EventStore,  DomSync, CrudManager, StringHelper, TaskBoard } from '@bryntum/taskboard/taskboard.lite.umd.js';

export class KanbanComponent implements OnInit, AfterViewInit { 
     taskBoardConfig = {   
features : { columnToolbars : false, taskEdit : true },
headerItems : { resourceAvatars : { type : 'resourceAvatars' } }, footerItems : { resourceAvatars : null }, columns : [ 'todo', 'doing', 'done' ], // Field used to pair a task to a column columnField : 'status', bodyItems : { tags : { type : 'tags' } }, // Project using inline data project : { tasksData : [ { id : 1, name : 'Double click me', status : 'doing', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' } ], resourcesData : [ { id : 1, name : 'Angelo', image : 'angelo.jpg' }, { id : 2, name : 'Celia', image : 'celia.jpg' }, { id : 3, name : 'Dave', image : 'dave.jpg' } ], assignmentsData : [ { id : 1, event : 1, resource : 1 } ] }, listeners : { cellClick(e) { console.log('cellClick', e); } }, eventTooltip: { showOn: 'hover', tools: { left: { cls: 'b-fa b-fa-copy', weight: 20, tooltip: 'copy task' }, }, renderer: (data: any) => { }, } } }; @ViewChild(BryntumTaskBoardComponent, { static : false }) taskboardComponent: BryntumTaskBoardComponent; private taskboard : TaskBoard;
private eventStore: EventStore;
ngAfterViewInit(): void {
this.taskboard = this.taskboardComponent.instance;
} }
Attachments
taskboard1.png
taskboard1.png (132.9 KiB) Viewed 2154 times
taskboard.png
taskboard.png (63.64 KiB) Viewed 2157 times

Post by saki »

Unfortunately it is not possible to spot the source of the problem from the above error messages. Is it reproducible in our demo at https://bryntum.com/examples/taskboard/frameworks/angular/angular-11/dist/angular-11/ – by a modification of the demo code.

If not, post please a showcase that we can build, run and debug please.


Post by tmcuong »

Taskboard it runs
but I can not set data such as

  this.taskboard.project = {
         tasksData       : this.taskBoardConfig.project.tasksData,
        resourcesData   : this.taskBoardConfig.project.resourcesData,
        assignmentsData : this.taskBoardConfig.project.assignmentsData
    };

field this.taskboard.project is not exists
How can I set data for it.


Post by saki »

I see.

taskBoardConfig is only a configuration object and it is supposed to be used only during initialization/configuration of the TaskBoard Angular component. If you need to access the taskboard instance at runtime, follow please this guide: https://bryntum.com/docs/taskboard/guide/TaskBoard/integration/angular#bryntum-taskboard-api-instance

Also, https://bryntum.com/docs/taskboard/api/TaskBoard/model/ProjectModel#config-tasksData, https://bryntum.com/docs/taskboard/api/TaskBoard/model/ProjectModel#config-resourcesData and https://bryntum.com/docs/taskboard/api/TaskBoard/model/ProjectModel#config-assignmentsData are config-only options (mind the white C in the blue circle). If you need to set data at runtime, use https://bryntum.com/docs/taskboard/api/TaskBoard/model/ProjectModel#function-loadInlineData method.


Post by tmcuong »

Is is still not load data to taskboard.


Post by alex.l »

Please, attach a runnable test case, we will check what's the problem.

All the best,
Alex


Post by tmcuong »

my code

  <bryntum-task-board                   
[features]="taskBoardConfig.features"
[columns]="taskBoardConfig.columns"
[eventEditFeature]="taskBoardConfig.features.eventEdit"
(onCellClick) = "onTaskBoardCellClick($event)" tooltip = "My cool Bryntum TaskBoard component" (onCatchAll) = "onTaskBoardEvents($event)"
></bryntum-task-board>
import { NgForOf } from '@angular/common';
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Host, Input, NgModule, OnInit, Output, ViewChild } from '@angular/core';
import { TenantStore } from '@core/services/tenant/tenant.store';
import { Subject } from "rxjs";
import { TenantService } from '@core/services/tenant/tenant.service';
import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ApiHttpService, AuthService, NotificationsService } from '@core/services';
import { DomSanitizer } from '@angular/platform-browser';
import { ConfirmationDialogService } from '@shared/components/confirmation-dialog/confirmation-dialog.service';
import { WorkflowService } from '../services/workflow.service';
import { FormArray } from '@angular/forms';
import { MatDialogConfig } from '@angular/material/dialog';
import { DataRequest } from '@shared/models/data.request';
import { ComboboxpopupService } from '@shared/components/comboboxpopup/comboboxpopup.service';
import { ERMComboboxService } from '@shared/components/ermcombobox/ermcombobox.service';
import { TaskService } from '../services/task.service';
import { FileUpload, TaskUpload } from '../services/_models/task.model';
import { ThrowStmt } from '@angular/compiler';
import { BryntumTaskBoardComponent } from '@bryntum/taskboard-angular';
import { DateHelper, EventModel, EventStore,  DomSync, CrudManager, StringHelper, TaskBoard } from '@bryntum/taskboard/taskboard.lite.umd.js';

@Component({
  selector: 'kanban-home',
  templateUrl: './kandan.component.html',
  styleUrls: ['./kandan.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class KanbanComponent implements OnInit, AfterViewInit {
  html: string;
  count: number;
  tenant: string;
  oldFolderId: string;
  _propertyName: string = "";
  fullName: string = "";
  id: string = "";
  ext: string = "";
  user: any;
  totalRating: number;
  totalViews: number;
  closeResult = '';
  editingRecord = null;
  newStartDate: any;
  newEndDate: any;
  taskName: any;
  listTag: any;
  tags: any;
  taskDescription: any;
  endDate: any;
  priority: any;
  issue: any;
  project: any;
  addToDoList: any;
  service = "";
  objUser: any;
  parentIdField = "";
  objectName = '';
  entityName = "";
  predicate = "";
  dataValue = "";
  viewMember = "";
  valueMember = "";
  comboboxName = "";
  dataVll = [];
  listUser: any;
  message: string;
  errorshow = false;
  options = new DataRequest();
  fileUploadList: FileUpload[];
  // Mustache = require('mustache');

  @Output() eventShow = new EventEmitter<boolean>();

  constructor(
    private domSanitizer: DomSanitizer,
    private tenantService: TenantService,
    private api: ApiHttpService,
    wkSV: WorkflowService,
    private modalService: NgbModal,
    private auth: AuthService,
    private cbxsv: ComboboxpopupService,
    private taskService: TaskService,
    private cbx: ERMComboboxService,
    private notificationsService: NotificationsService,
    private confirmationDialogService: ConfirmationDialogService,
    private changeDetectorRef: ChangeDetectorRef) {    
} @ViewChild('contentPopup') contentPopup; @ViewChild('contentAddUser') contentAddUser; @ViewChild('contentListTask') contentListTask;
resources = [ { id: '0', name: 'Bình thường', eventColor: 'blue' }, { id: '1', name: 'Thấp', eventColor: 'orange' }, { id: '2', name: 'Cao', eventColor: 'deep-orange' } ]; events = [ { id: 1, startDate: '2020-10-11T14:00:00', endDate: '2020-10-18T12:00:00', name: 'Hackathon 2020', allDay: true, resourceId: '0', eventColor: 'green' }, { id: 2, startDate: '2020-10-11T14:00:00', endDate: '2020-10-11T18:00:00', name: 'Check-In in Hotel', resourceId: '1' }, { id: 3, startDate: '2020-10-11T18:00:00', endDate: '2020-10-11T20:00:00', name: 'Relax and official arrival beer', allDay: true, resourceId: '1' }, { id: 4, startDate: '2020-10-11T20:00:00', endDate: '2020-10-11T21:00:00', name: 'Dinner', resourceId: '1' }, { id: 5, startDate: '2020-10-12T09:00:00', endDate: '2020-10-12T10:00:00', name: 'Breakfast', resourceId: '1' }, { id: 6, startDate: '2020-10-12T10:00:00', endDate: '2020-10-12T12:00:00', name: 'Team Scrum', resourceId: '1' }, { id: 7, startDate: '2020-10-12T12:00:00', endDate: '2020-10-12T14:00:00', name: 'Scheduler Grid introduction + review', resourceId: '1' }, { id: 8, startDate: '2020-10-12T14:00:00', endDate: '2020-10-12T15:00:00', name: 'Lunch', resourceId: '1' }, { id: 9, startDate: '2020-10-12T15:00:00', endDate: '2020-10-12T19:00:00', name: 'Active client project review', resourceId: '1' }, { id: 10, startDate: '2020-10-12T19:00:00', endDate: '2020-10-12T20:00:00', name: 'Dinner', resourceId: '1' }, { id: 11, startDate: '2020-10-13T09:00:00', endDate: '2020-10-13T10:00:00', name: 'Breakfast', resourceId: '1' }, { id: 12, startDate: '2020-10-13T10:00:00', endDate: '2020-10-13T12:00:00', name: 'Roadmapping for 2020', resourceId: '1' }, { id: 13, startDate: '2020-10-13T12:00:00', endDate: '2020-10-13T14:00:00', name: 'Review Assembla tickets and decide features to add', resourceId: '1' }, { id: 14, startDate: '2020-10-13T14:00:00', endDate: '2020-10-13T15:00:00', name: 'Lunch', resourceId: '1' }, { id: 15, startDate: '2020-10-13T15:00:00', endDate: '2020-10-13T19:00:00', name: 'Active programming', resourceId: '1' }, { id: 16, startDate: '2020-10-13T19:00:00', endDate: '2020-10-13T20:00:00', name: 'Dinner', resourceId: '1' }, { id: 17, startDate: '2020-10-14T09:00:00', endDate: '2020-10-14T10:00:00', name: 'Breakfast', resourceId: '1' }, { id: 18, startDate: '2020-10-14T10:00:00', endDate: '2020-10-14T18:00:00', name: 'Excursion', resourceId: '1' }, { id: 19, startDate: '2020-10-14T18:00:00', endDate: '2020-10-14T22:00:00', name: 'Team Building', resourceId: '1', eventColor: 'green' }, { id: 20, startDate: '2020-10-15T09:00:00', endDate: '2020-10-15T10:00:00', name: 'Breakfast', resourceId: 'hotel' }, { id: 21, startDate: '2020-10-15T14:00:00', endDate: '2020-10-15T15:00:00', name: 'Lunch', resourceId: 'hotel' }, { id: 22, startDate: '2020-10-15T19:00:00', endDate: '2020-10-15T20:00:00', name: 'Dinner', resourceId: 'hotel' }, { id: 23, startDate: '2020-10-15T00:00:00', endDate: '2020-10-16T00:00:00', name: 'Gantt review + development', allDay: true, resourceId: 'bryntum' }, { id: 24, startDate: '2020-10-16T09:00:00', endDate: '2020-10-16T10:00:00', name: 'Breakfast', resourceId: 'hotel' }, { id: 25, startDate: '2020-10-16T14:00:00', endDate: '2020-10-16T15:00:00', name: 'Lunch', resourceId: 'hotel' }, { id: 26, startDate: '2020-10-16T18:00:00', endDate: '2020-10-16T21:00:00', name: 'Split.JS conference: Monitoring and Reproducing Errors in Web Applications + Late Dinner or AfterParty', resourceId: 'michael' }, { id: 27, startDate: '2020-10-16T00:00:00', endDate: '2020-10-17T00:00:00', name: 'Root Cause ticket bash', allDay: true, resourceId: 'bryntum' }, { id: 28, startDate: '2020-10-17T09:00:00', endDate: '2020-10-17T10:00:00', name: 'Breakfast', resourceId: 'hotel' }, { id: 29, startDate: '2020-10-17T14:00:00', endDate: '2020-10-17T15:00:00', name: 'Lunch', resourceId: 'hotel' }, { id: 30, startDate: '2020-10-17T19:00:00', endDate: '2020-10-17T20:00:00', name: 'Dinner', resourceId: 'hotel' }, { id: 31, startDate: '2020-10-17T00:00:00', endDate: '2020-10-18T00:00:00', name: 'Pair programming sessions', allDay: true, resourceId: 'bryntum' }, { id: 32, startDate: '2020-10-18T09:00:00', endDate: '2020-10-18T10:00:00', name: 'Breakfast', resourceId: 'hotel' }, { id: 33, startDate: '2020-10-18T10:00:00', endDate: '2020-10-18T12:00:00', name: 'Check-Out & Fly home', resourceId: 'michael' } ]; tbarConfig = { items : [ { type : 'button', text : 'My button' } ] } taskBoardConfig: any; ngOnInit(): void {
this.config(); } // @ViewChild(BryntumCalendarComponent) calendarComponent: BryntumCalendarComponent; // // private calendar1: WeekGrid; // private calendar: Calendar; // private eventStore: EventStore; @ViewChild(BryntumTaskBoardComponent, { static : false }) taskboardComponent: BryntumTaskBoardComponent; //@ViewChild(BryntumTaskBoardComponent) taskboardComponent: BryntumTaskBoardComponent; taskboard = new TaskBoard({ // Supply it to the project project : { tasksData : [ { id : 1, name : 'Double click me', status : 'doing', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' } ], resourcesData : [ { id : 1, name : 'Angelo', image : 'angelo.jpg' }, { id : 2, name : 'Celia', image : 'celia.jpg' }, { id : 3, name : 'Dave', image : 'dave.jpg' } ], assignmentsData : [ { id : 1, event : 1, resource : 1 } ] } }); private eventStore: EventStore; filterTriggers = { filter: { align: 'start', cls: 'b-fa b-fa-filter' } }; highlightTriggers = { filter: { align: 'start', cls: 'b-fa b-fa-highlighter' } }; config() {
this.taskBoardConfig = { useDomTransition : true, features : { columnToolbars : true, columnHeaderMenu : true, taskEdit : { items : { category : { type : 'combo', items : [ 'Administrative', 'DevOps', 'Devs' ], name : 'category', label : 'Category', weight : 150 } } } }, headerItems : { resourceAvatars : { type : 'resourceAvatars' } }, tbar : [ { type : 'label', text : 'Theme' }, { type : 'buttonGroup', items : ['Stockholm', 'Material', 'Classic-Light', 'Classic', 'Classic-Dark'].map(name => { }) } ], footerItems : { resourceAvatars : null }, columns : [ 'todo', 'doing', 'done' ], // Field used to pair a task to a column columnField : 'status', bodyItems : { tags : { type : 'tags' } }, // Project using inline data project : { tasksData : [ { id : 1, name : 'Double click me', status : 'doing', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' } ], resourcesData : [ { id : 1, name : 'Angelo', image : 'angelo.jpg' }, { id : 2, name : 'Celia', image : 'celia.jpg' }, { id : 3, name : 'Dave', image : 'dave.jpg' } ], assignmentsData : [ { id : 1, event : 1, resource : 1 } ] }, listeners : { cellClick(e) { alert('cellClick'); console.log('cellClick', e); } }, eventTooltip: { showOn: 'hover', tools: { left: { cls: 'b-fa b-fa-copy', weight: 20, tooltip: 'copy task' }, }, renderer: (data: any) => { }, } } } /** * Find by name text field change handler */ onFindChange({ value }: any): void { // We filter using a RegExp, so quote significant characters const val = value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // A filter with an id replaces any previous filter with that id. // Leave any other filters which may be in use in place. // this.calendar.eventStore.filter({ // id: 'eventNameFilter', // filterBy: (event: EventModel) => event.name.match(new RegExp(val, 'i')) // }); } private getDismissReason(reason: any): string { if (reason === ModalDismissReasons.ESC) { return 'by pressing ESC'; } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { return 'by clicking on a backdrop'; } else { return `with: ${reason}`; } } doRequestTextareaValueChange(ev) { try { if (this.taskDescription == "") { $('#requestContent').addClass('form-control is-invalid'); $("#btnSave").attr('disabled', 'disabled'); $('#taskDescription').focus(); } else { $('#taskDescription').addClass('form-control').removeClass("is-invalid"); $("#btnSave").removeAttr('disabled'); } } catch (e) { console.info('could not set textarea-value'); } } openDialog(content, size: string = "") { this.fileUploadList = []; this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', size: size, windowClass: 'custom-class' }).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } SaveData(modal) { var task = new TaskUpload; task.name = this.taskName; task.description = this.taskDescription; task.dueDate = this.endDate; task.files = this.fileUploadList; task.issue = this.issue; task.project = this.project; task.addtoList = this.addToDoList; task.priority = this.priority; //task.owner = User.name; this.taskService.addTask(task).subscribe(item => { var date = this.newStartDate; this.editingRecord.meta.isCreating = false; this.editingRecord.set({ name: this.taskName, date }); this.changeDetectorRef.detectChanges(); this.notificationsService.notify("Tạo task thành công"); modal.dismiss(); }); } beforeEventEdit({ editor, eventRecord }): boolean { var newDate = eventRecord.data.endDate; this.taskName = eventRecord.data.name; this.editingRecord = eventRecord; this.editingRecord.meta.isCreating = true; this.newEndDate = eventRecord.data.endDate; this.newStartDate = eventRecord.data.startDate;//DateHelper.format(event.eventRecord.data.startDate, 'YYYY-MM-DD');//event.eventRecord.data.startDate; var img = '<img draggable="false" class="b-resource-avatar b-resource-image" ontouchstart="return false" src="assets/users/arcady.jpg">'; // eventRecord.set({ // name: (eventRecord.data.id.indexOf('_generated') == -1 ? '' : eventRecord.data.name), // startDate: newDate // }); this.listUser = []; this.openDialog(this.contentPopup); return false; } // /** // * Highlight text field change handler // */ // onHighlightChange({ value }: any): void { // const // val = value.toLowerCase(), // { eventStore, calendar } = this; // // Calendars refresh on any data change so suspend that. // // We will trigger the store's change event when we're done. // eventStore.suspendEvents(); // // Loop through all events in the store // eventStore.forEach((task) => { // // The cls field is a DomClassList with add and remove methods // if (val !== '' && task.name.toLowerCase().includes(val)) { // task.cls.add('b-match'); // } // else { // task.cls.remove('b-match'); // } // }); // eventStore.resumeEvents(); // // Announce that data has changed which will refresh UIs. // eventStore.trigger('change'); // calendar.element.classList[value.length > 0 ? 'add' : 'remove']('b-highlighting'); // } /** * Called after View is initialized */ ngAfterViewInit(): void { // var taskBoard1 = new TaskBoard({ // // Supply it to the project // project : {
// } // });
// Calendar.Modes.register('weekgrid', WeekGrid); // Calendar.Modes.register('mynewtype', MyClassName);
// this.calendar = this.calendarComponent.instance; // this.calendar.resources = this.resources; // this.calendar.events = this.events; // this.eventStore = this.calendar.eventStore;
//this.calendar.addListener('cellOverflowClick', this.onMonthMoreCellClick); //Calendar.Modes.register('weekgrid', WeekGrid); //this.calendar.on('beforeEventEdit', this.beforeEventEdit.bind(this)); //this.calendar.onCellOverflowClick. // this.calendar.onCellOverflowClick.bind(this.onMonthMoreCellClick); // this.calendarConfig.modes.month.overflowPopup.listeners.beforeShow() //this.calendar = this.calendarComponent.instance; //this.taskboard.re = this.resources; // this.taskboardComponent.project = { // tasksData : this.taskBoardConfig.project.tasksData, // resourcesData : this.taskBoardConfig.project.resourcesData, // assignmentsData : this.taskBoardConfig.project.assignmentsData // };
//this.taskboardComponent.project.taskStore.data = this.taskBoardConfig.project.tasksData; this.taskboard = this.taskboardComponent.instance;
// this.taskboard. // this.taskboard = new TaskBoard({ // features : { // taskEdit : { // items : { // category : { // type : 'combo', // items : [ 'Administrative', 'DevOps', 'Devs' ], // name : 'category', // label : 'Category', // weight : 150 // } // } // } // } //}); //this.taskboard. = this.taskBoardConfig; // this.taskboard.project.inlineData = { // tasksData : tasksOnClient, // resourcesData : resourcesOnClient, // assignmentsData : assignmentsOnClient // }; // this.task //this.taskboard.project. //this.taskboard.on('beforeEventEdit', this.beforeEventEdit.bind(this)); } onTaskBoardCellClick(e) : void {
console.log('onCellClick', e); } onTaskBoardEvents(event: Record<string, any>): void {
// Uncomment the code in this method to start "logging" events switch (event.type) { case 'beforeEventEdit': // alert(9); break; case 'daterangechange': break; case 'aftereventsave': // alert('save'); // console.log(`New event saved: ${event.eventRecord.name}`); break; case 'beforeeventdelete': // alert('delete'); console.log(event.eventRecords); console.log(`Events removed: ${event.eventRecords.map(eventRecord => eventRecord.name).join(',')}`); this.taskService.deleteTask(event.eventRecords.id).subscribe(item => {
}); break; default: // console.log(event.type); break;
} } onUpdateTags() { if (this.tags != null) { this.listTag = this.tags.split(" ").filter(i => i); this.changeDetectorRef.detectChanges(); } } // syncData({ store, action, records } : { store : Store; action : String; records : Model[]}) : void { // console.log(`${store.id} changed. The action was: ${action}. Changed records: `, records); // // Your sync data logic comes here // } getAvatar(filename: string) { if (filename == "" || filename == null) return ""; var ext = filename.substring(filename.lastIndexOf('.'), filename.length) || filename; if (ext == null) { // alert(1); return "file.svg"; } else { switch (ext) { case ".txt": return "txt.svg"; case ".doc": case ".docx": return "doc.svg"; case ".7z": case ".rar": case ".zip": return "zip.svg"; case ".jpg": return "jpg.svg"; case ".mp4": return "mp4.svg"; case ".xls": case ".xlsx": return "xls.svg"; case ".pdf": return "pdf.svg"; case ".png": return "png.svg"; case ".js": return "javascript.svg"; default: return "file.svg"; } } } getNow() { var today = new Date(); var dd = String(today.getDate()).padStart(2, '0'); var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0! var yyyy = today.getFullYear(); var ret = dd + '/' + mm + '/' + yyyy; return ret; } onDeleteUploaded(file: string) { let index = this.fileUploadList.findIndex(d => d.fileName.toString() === file.toString()); //find index in your array if (index > -1) { this.fileUploadList.splice(index, 1);//remove element from array this.changeDetectorRef.detectChanges(); } } openDialogFolder(content, size: string = "") { this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', size: size, windowClass: 'custom-class' }).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } validate(item) { // fileName //this.errorshow = false; switch (item) { case "taskName": if (this.taskName === "") { $('#taskName').addClass('form-control is-invalid'); $("#btnSave").attr('disabled', 'disabled'); } else { $('#taskName').addClass('form-control').removeClass("is-invalid"); $("#taskName").removeAttr('disabled'); } $('#taskName').focus(); break; } this.changeDetectorRef.detectChanges(); } onSaveAddUser(event) { var modal = event.modal; this.listUser = this.cbxsv.dataSelcected; console.log(this.listUser); this.changeDetectorRef.detectChanges(); modal.dismiss(); } loadRole() { this.cbxsv.dataSelcected = []; this.cbxsv.objectName = "users"; this.cbxsv.objectType = "U"; this.comboboxName = "Users"; this.api.call("ERM.Business.SYS", "ValueListBusiness", "GetJsonAsync", ["L1901"]).subscribe(res => { if (res && res.msgBodyData != null && res.msgBodyData.length > 0) { var data = res.msgBodyData[0]; if (data) { this.dataVll = data; // console.log(this.dataVll); this.changeDetectorRef.detectChanges(); } } }) } onAddUser(event) { this.loadRole(); this.changeDetectorRef.detectChanges(); this.openDialogFolder(this.contentAddUser, ""); } async handleFileInput(files: FileList) { if (this.fileUploadList == null) this.fileUploadList = []; var count = this.fileUploadList.length; //console.log(files); for (var i = 0; i < files.length; i++) { let index = this.fileUploadList.findIndex(d => d.fileName.toString() === files[i].name.toString()); //find index in your array if (index == -1) { let no = count + i; let data: ArrayBuffer; data = await files[i].arrayBuffer(); var fileUpload = new FileUpload(); // var bytes = new Int8Array(this.datafile[no] as ArrayBuffer); var item = this.arrayBufferToBase64(data); fileUpload.fileName = files[i].name; fileUpload.avatar = this.getAvatar(fileUpload.fileName); fileUpload.extension = files[i].name.substring(files[i].name.lastIndexOf('.'), files[i].name.length) || files[i].name; fileUpload.createdBy = this.user.userName; fileUpload.createdOn = this.getNow(); fileUpload.type = files[i].type; fileUpload.fileSize = files[i].size; fileUpload.fileName = files[i].name; fileUpload.data = item;
fileUpload.funcId = 'TM001';
fileUpload.objectType = 'AD_Users'; fileUpload.objectID = this.user.userID; this.fileUploadList.push(Object.assign({}, fileUpload)); } } // files = null; $('#file').val(''); this.changeDetectorRef.detectChanges(); return false; } arrayBufferToBase64(buffer) { var binary = ''; var bytes = new Uint8Array(buffer); var len = bytes.byteLength; for (var i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } return window.btoa(binary); } }

Post by alex.l »

Unfortunately I cannot run your code because it has dependencies that are not available for me.
We have to see a runnable test case. If taskpanel.project is not available for you, then there might be 2 options: it was not created yet, or you used a wrong link. We cannot reproduce it in our demos. We have to see your runnable app to help you.
Please, delete node_modules folder, zip you app and attach here or provide steps to reproduce it in our demo. Or try to modify our demo to make it reproducible and attach here.

All the best,
Alex


Post by tmcuong »

I can not set value to
this.taskboard.project = {
tasksData : tasksOnClient,
resourcesData : resourcesOnClient,
assignmentsData : assignmentsOnClient
};
when it run runtime mode
however I can declare

taskboard = new TaskBoard({});
[code]

my test code below. 
[code]
<bryntum-task-board   
#taskboard
[features]="taskBoardConfig.features"
[columns]="taskBoardConfig.columns"
[eventEditFeature]="taskBoardConfig.features.eventEdit"
(onCellClick) = "onTaskBoardCellClick($event)" tooltip = "My cool Bryntum TaskBoard component" (onCatchAll) = "onTaskBoardEvents($event)"
></bryntum-task-board>
    taskboard = new TaskBoard({
        // Supply it to the project
        project : {
          tasksData : [
            { id : 1, name : 'Double click me', status : 'doing', description : 'Lorum ipsum bacon', tags : 'bug,reproduced' }
        ],

    resourcesData : [
        { id : 1, name : 'Angelo', image : 'angelo.jpg' },
        { id : 2, name : 'Celia', image : 'celia.jpg' },
        { id : 3, name : 'Dave', image : 'dave.jpg' }
    ],

    assignmentsData : [
        { id : 1, event : 1, resource : 1 }
    ]
    }
});  

My question is how I attach variable taskboard in .ts code to bryntum-task-board in .html file


Post by saki »

I see line

taskboard = new TaskBoard({});

but it is without context, we do not know when you are executing the line and what happens to the taskboard variable then. Normally, in Angular, we do not create instances of vanilla Bryntum components like that but we use wrappers.

The rest of the html template code looks valid provided that taskBoardConfig is defined.

In any case we need a code that we can really run locally which would mean we could build it with and run it npm i; npm start and which we can investigate and debug.

Meanwhile, take a look at the source of the angular-11 demo that shows the recommended approaches. Its app.component.ts is very simple and it makes TaskBoard instance available as the class property this.taskboard:

/**
 * App component script
 */
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { TaskBoardConfig } from './app.config';
import { BryntumTaskBoardComponent } from '@bryntum/taskboard-angular';

// Bryntum umd lite bundle comes without polyfills to support Angular's zone.js
import { TaskBoard } from '@bryntum/taskboard/taskboard.lite.umd.js';

@Component({
    selector    : 'app-root',
    templateUrl : './app.component.html',
    styleUrls   : ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {

    // Bryntum TaskBoard Angular wrapper reference
    @ViewChild(BryntumTaskBoardComponent, { static : false }) taskboardComponent: BryntumTaskBoardComponent;
    private taskboard : TaskBoard | undefined;

    config = TaskBoardConfig;

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

Post Reply