CRUD operations in Kanban for angular and spring boot application

Question

Hi Team,I am new to Syncfusion and I am facing some difficulty in implementing the CRUD operations for Kanban component (ej2-angular-kanban). Our server is in spring boot and I am able to get data using the code : public data: Object[];public cardSettings: CardSettingsModel = {    contentField: 'description',    headerField: 'name'  }ngOnInit(): void {    this.kanbanTaskService.getAllKanbanTasks().subscribe((response: any) => {      this.data = response.result;    }); }But I am facing difficulty to implement other operations: Add, Edit, Delete. So, if you can provide any example for implementing this functionality then please share some samples.

Gunasekar Kuppusamy · Answer

Hi Ritesh,

Greetings from Syncfusion support.

We have validated your query `I am facing difficulty to implement other operations: Add, Edit, Delete. So, if you can provide any example for implementing this functionality` from our end.

Kanban CRUD operations can be performed by using the using `url` property of DataManager.We have performed CRUD operations like add/delete/update actions using `insertUrl`, `removeUrl` and `updateUrl` properties .

Code snippets:

app.component.ts

  private dataManager: DataManager = new DataManager({
    url: "http://localhost:54738/Home/LoadData",

    updateUrl: "http://localhost:54738/Home/UpdateData",

    insertUrl: "http://localhost:54738/Home/UpdateData",

    removeUrl: "http://localhost:54738/Home/UpdateData",

    adaptor: new UrlAdaptor(),

    crossDomain: true
  });

app.component.html

<ejs-kanban #kanbanObj [dataSource]="dataManger">

…….
</ejs-kanban>

We have also prepared a sample for your reference, please find below,

Sample: https://stackblitz.com/edit/angular-tkqftj-d7jan6?file=app.component.ts

Service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScheduleCRUD-1923342288

In this sample, we have used URLAdaptor for performing the CRUD operations

Please find the below documentation link for more details,

Documentation: https://ej2.syncfusion.com/angular/documentation/kanban/data-binding/#url-adaptor

Regards,

Gunasekar k

Ritesh · Answer

Hi Gunasekar,Thank you for sharing the sample. The API for url property is /LoadData and for updateUrl, insertUrl & deleteUrl properties it is /UpdateData. So, is the api for read operations supposed to be different than for other operations?

Gunasekar Kuppusamy · Answer

Hi Ritesh,  



 

Good day to you.

Query: Is the api for read operations supposed to be different than for other operations? 

Yes, Kanban component separate API for the read operations. you can use the url​ adaptor for read operations.

Code snippets:






private dataManager: DataManager = new DataManager({  
    url: 'http://localhost:54738/Home/LoadData',  
    updateUrl: 'http://localhost:54738/Home/UpdateData',  
    insertUrl: 'http://localhost:54738/Home/InsertData',  
    removeUrl: 'http://localhost:54738/Home/RemoveData',  
    adaptor: new UrlAdaptor(),  
    crossDomain: true  
  });  
  
We have also prepared a sample for your reference, please find below,
Sample: https://stackblitz.com/edit/angular-tkqftj-92vqey?file=app.component.ts
Service: https://www.syncfusion.com/downloads/support/forum/166925/ze/SCHEDU~11979371824Please refer to the below documentation link for more details,https://ej2.syncfusion.com/angular/documentation/kanban/data-binding/#url-adaptorRegards,Gunasekar K