Skip to main content

cardTemplate

Description

Optional. Generates and applies a custom HTML template for the card.

Usage

function cardTemplate ({ cardFields, selected, dragging, cardShape }){
return "HTML template of the card";
};

Parameters

The callback function receives an object with these properties:

  • cardFields - contains the card's data
  • selected - indicates if the card is selected
  • dragging - indicates if the card is being dragged
  • cardShape - the card's configuration object
important

To add a context menu to the card template, include a custom icon in the markup and use the data-menu-id=${cardFields.id} attribute as shown in the example below.

Example

const cardTemplate = ({ cardFields, selected, dragging, cardShape }) => {
const { label, color, id } = cardFields;
if (selected) {
return `
<div className="custom-card" style={{padding: '20px'}}>
<div className="status-color" style={{background: '${color}'}}></div>
<div data-menu-id=${id} >
<i className="wxi-dots-v"></i>
</div>
Selected:${label}
</div>
`;
}
return `
<div className="custom-card" style={{padding: '20px'}}>
<div className="status-color" style={{background: '${color}'}}></div>
<div data-menu-id=${id} >
<i className="wxi-dots-v"></i>
</div>
${label}
</div>
`;
}

new kanban.Kanban("#root", {
cards,
columns,
cardTemplate: kanban.template(card => cardTemplate(card)),
// other parameters
});

Change log: Context menu support was introduced in v1.4

Related articles: Customization

Related sample: Kanban. Custom card