Dynamically Adding New Cards To Kanban Board

Question

How do I add new cards to the Kanban board? I've been searching for hours trying to figure this out and have not found any good information on the Vue.JS component to get this to work. I can add an item to the JSON data source, but it does not reflect on the board. I made sure the "editSettings" for the board have allowEditing:true and allowAdding:true. I've tried using the default dialog and a custom dialog template. The documentation states the dialog is used when you double-click a card to edit it, but it doesn't explain how to add a new one. I've tried using the "addCard" method on the object, but that doesn't work either. It gives me the following error:

TypeError: Cannot read property 'nextElementSibling' of null

at LayoutRender.renderCardBasedOnIndex

Is there some documentation or an example somewhere on how to dynamically add cards and update the data source in a Vue.JS environment?

Thanks,
Brian

Balasubramanian Sattanathan · Accepted Answer

Hi Brian, 

Greetings from Syncfusion Support. 

We have analyzed your requirement at our end and prepared a sample based on that by using the addCard public method like below.  
https://codesandbox.io/s/vue-add-card-dynamically-1sjhr 





newCard: function () { 
  const cardIds = this.$refs.kanbanObj.ej2Instances.kanbanData.map((obj) => 
    parseInt(obj.Id, 10) 
  ); 
  const cardCount = Math.max.apply(Math, cardIds) + 1; 
  const cardDetails = { 
    Id: cardCount, 
    Status: "Open", 
    Priority: "Normal", 
    Assignee: "Andrew Fuller", 
    Estimate: 0, 
    Tags: "", 
    Summary: "This is summary", 
  }; 
  // Using openDialog we can open the dialog with new provided data 
  // this.$refs.kanbanObj.ej2Instances.openDialog('Add', cardDetails); 
  // Using addCard method we can add the card without opening the dialog 
  this.$refs.kanbanObj.ej2Instances.addCard(cardDetails); 
}, 
Kindly refer and follow the above sample and let us know the below details if the problem is not resolved. 

Share the Kanban related code snippets with package version
Try to reproduce your problem in the above sample or
Share an issue reproduced sample to validate the issue and provide a prompt solution.

Regards, Balasubramanian S

N · Answer

Hi,

I'm using react and remote data. when I add the card, the card is read as undefined until the page is reloaded. How would you reload the page without affecting the swim lanes/columns you have collapsed before adding. Could you reload only that specific card or would reloading the server work?

thank you

Gunasekar Kuppusamy · Answer

Hi N,

Good day to you.

We have validated your queries.

Query 1: How would you reload the page without affecting the swim lanes/columns you have collapsed before adding.

You can reload the page without affecting the columns collapsed state by setting the enablePersistence property as true.

Code snippets:

 <ejs-kanban id="kanban" ref="kanbanObj" keyField="Status" enablePersistence="true">
  </ejs-kanban>

Query 2: Could you reload only that specific card or would reloading the server work?

You can reload the cards alone after added the new card in the Kanban component by using the refresh public method in the actionComplete event.

Code snippets:

OnActionComplete(args) {    if (args.requestType === "cardCreated") {
      var kanbanInstance = this.$refs.kanbanObj.ej2Instances;
      setTimeout(function () {
        kanbanInstance.refresh();
      }, 300);
    }
  }

We have created a sample for your reference

Sample: https://codesandbox.io/s/vue-add-card-dynamically-forked-y4p46?file=/src/App.vue

Please check the sample and let us know if the sample meets your requirement.

Regards,

Gunasekar