adding new cards via api

[schuersted]

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]

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 { get; set; }   

            public int count { get; set; }   

        }   

    }   

    

Regards,   

Buvana S   

[schuersted]

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]

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]

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