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.
Unfortunately, activation email could not send to your email. Please try again.

adding new cards via api

Thread ID:

Created:

Updated:

Platform:

Replies:

127614 Nov 28,2016 11:44 AM Nov 30,2016 08:56 AM JavaScript 4
loading
Tags: ejKanban
schuersted
Asked On November 28, 2016 11:44 AM

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.

window.myKanbanData.push(data);

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

$("#Kanban1").ejKanban(
                {
                    dataSource: window.myKanbanData,


I do not see the change. 

I tried 

kanbanObj.refresh();
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?

Cheers,

Marcus


Buvana Sathasivam [Syncfusion]
Replied On November 29, 2016 07:26 AM

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"})   
                                                                                       or   
// 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   
kanbanObj.getCurrentJsonData()   
    
    
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.   
   
Index.cshtml   
    
  var dataManager = ej.DataManager({   
            url: "/Home/DataSource",   
            crudUrl: "/Home/Crud",   
            adaptor: "UrlAdaptor"   
        });   
    
$(“#Kanban”).ejKanban({ dataSource : dataManager });   
    
    
    
HomeController.cs   
    
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)   
                KanbanTaskRepository.Update(changed);   
            if (deleted != null)   
                KanbanTaskRepository.Delete(deleted);   
            if (added != null)   
                KanbanTaskRepository.Add(added);   
            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; }   
        }   
    }   
    
Regards,   
Buvana S   


schuersted
Replied On November 29, 2016 08:36 AM

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?

Thx

Marcus

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. 





schuersted
Replied On November 30, 2016 04:49 AM

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. 

Buvana Sathasivam [Syncfusion]
Replied On November 30, 2016 08:56 AM

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    
kanbanObj.getCurrentJsonData(); 


Please let us know if you need any further assistance. 

Regards, 
Buvana S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;