We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

adding new cards via api

Hi, how can I update new cards via API and see them in the board, and in the data?

What I tried so far:

kanbanObj.updateCard(data.Id, data);

Works only so far, that the new card is shown in the board, but not in the underlying datasource (plain array from the page itself).

If I try the other way around, and change the underlying datasource, e.g.


while the Kanban is directly linked to the same data source:

                    dataSource: window.myKanbanData,

I do not see the change. 

I tried 

and reassigning the datasource via kanbanObj.data = window.myKanbanData;

but nothing seems to work. 

My workaround so far is to add the datasource, and add to the Kanban board via the update.

But I am sure I am missing something here, which should make this easier, right?



4 Replies

BS Buvana Sathasivam Syncfusion Team November 29, 2016 12:26 PM UTC

Hi Schuersted,   
Query #1: how can I update new cards via API and see them in the board, and in the data?”   
The requirement of updating/adding new cards can be achieved using the methods “updateCard”/ ”addCard”.    
// Create Kanban Object   
var kanbanObj=$("#Kanban").data("ejKanban");   
// Add new Card   
kanbanObj.KanbanEdit.addCard(556,{Id: 556, Status: "Open", Summary: "Task 1", Assignee: "Andrew Piller"})   
// Update new card   
kanbanObj.updateCard(554,{Id: 554, Status: "Open", Summary: "Task 1", Assignee: "Andrew Piller"})   
And the corresponding methods updates the board with new DataSource and internal DataSource which can get through the method “getCurrentJsonData()”.   
Updated data on Kanban control using getCurrentJsonData public method,  - this updated data source will be maintained until browser refreshes.    
// Create Kanban Object   
var kanbanObj=$("#Kanban").data("ejKanban");   
// Get Updated datasource   
As per your query, “window.myKanbanData” value will not be updated , since its local window storage is used temporarily.  You can also permanently update DB with new updated card values using post method given in DataManager like SQL, EF, etc.   
  Example code for post method to process the data on data manager.   
  var dataManager = ej.DataManager({   
            url: "/Home/DataSource",   
            crudUrl: "/Home/Crud",   
            adaptor: "UrlAdaptor"   
$(“#Kanban”).ejKanban({ dataSource : dataManager });   
public class HomeController : Controller   
        //Add,Update,Delete multiple records in the database   
        public ActionResult Crud(List<EditableTask> changed, List<EditableTask> added,List<EditableTask> deleted)   
            if (changed != null)   
            if (deleted != null)   
            if (added != null)   
            var data = KanbanTaskRepository.GetAllRecords();   
            return Json(data, JsonRequestBehavior.AllowGet);   
        public ActionResult DataSource(DataManager dm)   
            IEnumerable DataSource = KanbanTaskRepository.GetAllRecords().Take(10).ToList();   
            DataResult result1 = new DataResult();   
            DataOperations operation = new DataOperations();   
            result1.result = DataSource;   
            result1.count = DataSource.AsQueryable().Count();   
            return Json(result1, JsonRequestBehavior.AllowGet);   
        public class DataResult   
            public IEnumerable result { getset; }   
            public int count { getset; }   
Buvana S   

SC schuersted November 29, 2016 01:36 PM UTC

Hi Buvana, 

thx for the quick answer. 

                        kanbanObj.KanbanEdit.addCard(data.Id, data);

throws me an error Uncaught TypeError: Cannot read property 'addCard' of null(…)

while running it with 

                        kanbanObj.updateCard(data.Id, data);

works fine. 

On the window.myKanbanData local object, real updates via updateCard which do not insert as above, are reflected in the local object. Only the adding via updateCard does not do it. I assume once I get the addCard method running, that might work too. 

I'll update to the latest version first to make sure, that there is not some old bug. Or do I do something else wrong?



PS: the page I am using is triggered via websockets and eventually Amazon Alexa calls allowing to voice control the kanban board. No server side code, only client side, and data transfer to store the data via websocket. 

SC schuersted November 30, 2016 09:49 AM UTC

just figured out, that kanbanObj.KanbanEdit.addCard(556,{Id: 556, Status: "Open", Summary: "Task 1", Assignee: "Andrew Piller"})   

only works, if the kanban is defined with

 editSettings: {
                        allowEditing: true,
                        allowAdding: true,

Still, it is not updating the underlying JSON object while the updateCard statement is doing that. I can solve that by assigning kanbanObj.getCurrentJsonData() after adding the data. 

Thx for your help. 

BS Buvana Sathasivam Syncfusion Team November 30, 2016 01:56 PM UTC

Hi Marcus, 

Thanks for your response. 

Yes, allowAdding’ is need to set as true to use addCard public method. addCard() and updateCard() public methods updates the Kanban board with updated internal DataSource which can get through the method “getCurrentJsonData()”. 

“window.myKanbanData” value will not be updated, since its local window storage is used temporarily. You can use getCurrentJsonData() public method to retrieve the updated data source. Please refer the following code, 

// Create Kanban Object    
var kanbanObj=$("#Kanban").data("ejKanban");    
// Get Updated datasource    

Please let us know if you need any further assistance. 

Buvana S 

Live Chat Icon For mobile
Up arrow icon