Letting user's add cards and columns through a add column button and add card button

[Paul Jan]

For our Webapplication we want to make it possible for user's to add cards to the Kanban board and also add columns with their own desired specifications. With specifications I mean a user should be able to add a new column with their own desired header title. On the demo page I saw that it was possible to add cards with the help of a property pane, the link: https://ej2.syncfusion.com/react/demos/?_gl=1*l5c2tw*_ga*ODMwMTE0Mjk1LjE2NzAyNTExNDY.*_ga_WC4JKKPHH0*MTY3MDQxNjkyMS41NC4wLjE2NzA0MTY5MjEuMC4wLjA.&_ga=2.235328577.1738857991.1670251146-830114295.1670251146#/material/kanban/dialog-editing.

We would very much like to do the same with our Kanban board in terms of adding cards functionality through a property pane. I have prepared a codesample from what we have so far here: https://stackblitz.com/edit/nextjs-64xndc?file=components/Kanban.tsx.

Can we be put in the right direction for implementing such features? I also want to add that we do intent on using functional components rather than class components, so it would be great if there is some updated version on that demo for functional components, or if we could get some help converting the class components to functional components would be great!

[Vinothkumar Yuvaraj]

Hi Paul Jan,

We created a sample based on your requirements. In the below sample, we added the dynamic column using the addColumn public method. Please find the attached sample and API Link for your reference.

Kanban.tsx

export default function Kanban() {

    let kanbanObj;

    let count=1;

    function column() {

       kanbanObj.addColumn({ headerText: 'Done'+count, keyField: 'Close'+count })

       count++;

   }

   return (

     <ButtonComponent id='column' className="e-btn" onClick={column.bind(this)}>Add Column</ButtonComponent>

    <KanbanComponent   ref={(kanban) => { kanbanObj = kanban; }} >

    </KanbanComponent>

)

}

 

Sample : https://stackblitz.com/edit/nextjs-ynvsqe?file=components%2FKanban.tsx

API Link : https://ej2.syncfusion.com/react/documentation/api/kanban/#addcolumn

Please let us know if you have any concerns.

Regards,

Vinothkumar

[Paul Jan]

Thank you for your reply! The add column works right now. Do you also have any suggestions on how the user can define the column title himself? So the user has a modal and can type in the desired header title. The same has to be done with our cards, that the user get a modal form where they can put in their desired properties to populate the cards.

Though when adding new columns right now the columns reduce in size because they all tent to fit on one page without a scrolling effect. Is it possible to let the kanban board keep the same width and let them expand to the right? To explain myself better can each column within the kanban board be configured with a fixed width, so that every time a new column is created the user has to scroll to the right to see the other kanban boards.

[Vinothkumar Yuvaraj]

Query #1: “Do you also have any suggestions on how the user can define the column title himself?”

The Kanban board is also able to support a given user-defined title. In the below sample, we render the dialog when you click the "add column" button to get the entered column header text and key field values. The column keyField property must have a unique value.

Query #2: “Is it possible to let the kanban board keep the same width and let them expand to the right?”

Set the Kanban board width using the width property, and set the individual column width by adding the below styles.

Kanban.tsx

<KanbanComponent width="600px">……..

</KanbanComponent>

globals.css

.e-kanban .e-kanban-table col {

    width: 200px;

} 

Sample : https://stackblitz.com/edit/nextjs-p7doay?file=components%2FKanban.tsx,styles%2Fglobals.css

[Paul Jan]

Question1: Thank you for your reply, however how can I make it so that every column has a item count next to it. Now when I click add new column the count disappears of the previous made columns, but I want every column (including the default made columns) to look like this:

  . 

Question 2: ​How can I add a add card button to every column (also the ones created by a user). To give you a clue of what I am asking I provide a picture here: 

As you can see an add card option is displayed below every card in a column of the kanban board. How can I make this exact configuration possible? 

[Vinothkumar Yuvaraj]

Query 1: “how can I make it so that every column has a item count next to it”

To add a count of items in each column, you can use the following code in your Kanban.tsx file:

function columnTemplate(props: { [key: string]: string }) {

   return (

      <div className="header-template-wrap">

         <div className="e-item-count"> - {props.count} items</div>

      </div>

  );

}

In your globals.css file, you can add the following code to properly align the item count:

globals.css

. .e-kanban .e-kanban-header .e-header-cells .header-template-wrap {

  display: flex;

  align-items: center;

}

To add an "add card" button to each column, you can use the "showAddButton" property in your Kanban.tsx file like this:

 <KanbanComponent>

   <ColumnsDirective>

     <ColumnDirective showAddButton={true} />

   </ColumnsDirective>

</KanbanComponent>

For more information, you can refer to the API documentation here: https://ej2.syncfusion.com/angular/documentation/api/kanban/columns/#showaddbutton

You can also see a sample implementation at the following StackBlitz link: https://stackblitz.com/edit/nextjs-iu9bwr?file=components%2FKanban.tsx,styles%2Fglobals.css

[Paul Jan]

I am satisfied with the showaddbutton and the count function works great as of right now. I have another question is it possible to add a tooltip for the showaddbutton? If so is it also possible to apply text to the showaddbutton such as "add card" in the button text box? 

[Vinothkumar Yuvaraj]

You can use the queryCellInfo event and add the title property to the button element, as shown in the following sample:

Kanban.tsx

export default function Kanban() {

 function queryCellInfo(args) {

  let elements = args.element.querySelectorAll(".e-show-add-button")

  if (args.requestType == 'contentRow'){

    for (let i=0 ; i<elements.length ; i++){

      elements[i].setAttribute('title',"add card")

    }

  }

 return (

   <KanbanComponent  queryCellInfo={queryCellInfo.bind(this)} >

   </KanbanComponent>      

 }

This should allow you to add a tooltip to the button.

Sample : https://stackblitz.com/edit/nextjs-d8j6fv?file=components%2FKanban.tsx,styles%2Fglobals.css

API : https://ej2.syncfusion.com/react/documentation/api/kanban/#querycellinfo

[Paul Jan]

Thank you for your response! Is it also possible to put text next to the plus icon within the showaddbutton? I tried something like "Elements[i].innerHTML = "Add button" but if I do that the plus icon disappears from the button. My second question is how do I style the tooltip you generated through the title attribute. I have already tried something like [title] { color:green;} in CSS, but it does not apply to the title attribute. Any idea how that should be possible?

[Vinothkumar Yuvaraj]

Query 1 : “Is it also possible to put text next to the plus icon within the showaddbutton?”

You can use the queryCellInfo event and add the "Add Card" text next to the icon by using the following code:

Kanban.tsx

export default function Kanban() {ction Kanban() {

   function queryCellInfo(args) {

    let elements = args.element.querySelectorAll(".e-show-add-button")

    if (args.requestType == 'contentRow') {

      for (let i = 0; i < elements.length; i++) {

        const element = document.createElement("div")

        element.innerHTML = "Add Card"

        element.className = "show-add-button"

        elements[i].appendChild(element)

      }

    }

  }urn (

   <KanbanComponent  queryCellInfo={queryCellInfo.bind(this)} >

   </KanbanComponent>      

 }

 

In your globals.css file, you can add the following code to properly align the elements:

globals.css

. e-kanban .e-content-row .e-show-add-button{

  display: flex;

  justify-content: center;

}

.e-kanban .e-content-row .show-add-button{

  padding: 11px;

}

.e-content-row .e-collapsed .show-add-button {

  display: none;

}

Query 2 : “how do I style the tooltip you generated through the title attribute”

To address your requirement, you can use our Tooltip component instead of the title attribute. You can set the target property to the Kanban showAddButton element class name and add a custom class for the Tooltip to customize the styles.

Please see the following code and sample for reference:

Kanban.tsx

  <TooltipComponent position="TopCenter" cssClass="tooltipElement" content="Add Card" target=".e-show-add-button">

      <KanbanComponent>….<KanbanComponent …/>

  </TooltipComponent>

 

To align the tooltips, you can use the following class name in your globals.css file:

globals.css

.tooltipElement.e-tooltip-wrap.e-popup {

  background-color: rgb(117, 116, 115);

  border-radius: 4px;

}

Here is a sample that demonstrates this: https://stackblitz.com/edit/nextjs-k3tj1e?file=components%2FKanban.tsx,styles%2Fglobals.css

For more information, please see our documentation: https://ej2.syncfusion.com/react/documentation/tooltip/getting-started/