DayPilot.Kanban.cards.list

The cards.list property (array) stores the Kanban card data source.

The array items are objects with the following structure:

• id (number | string) - card ID

• name (string) - card name, displayed at the top as a header (the value is HTML-encoded automatically)

• text (string) - card text, displayed as the card body (the value is HTML-encoded automatically)

• html (string) - optional custom HTML content that overrides name and text

• column (number | string) - Kanban column ID

• swimlane (number | string) - optional Kanban swimlane ID

• barColor (string) - optional bar color override; if not specified, the column barColor is used

• areas (array) - list of active areas

Declaration

DayPilot.Kanban.cards.list

Notes

You can set this property during initialization or replace the current card collection later using kanban.update({cards}).

Examples

JavaScript

const cards = [
  {id: 1, "name": "Task 1", column: "1", text: "This is a description of task #1."},
  {id: 2, "name": "Task 2", column: "1", text: "This is a description of task #2.", barColor: "#ea3624"}
];

const kanban = new DayPilot.Kanban("dp", {
  cards: cards,
  // ...
});
kanban.init();

You can also replace the current card collection after initialization:

const cards = [
  {id: 1, "name": "Task 1", column: "1", text: "This is a description of task #1."},
  {id: 2, "name": "Task 2", column: "1", text: "This is a description of task #2.", barColor: "#ea3624"}
];

kanban.update({cards});

Angular

<daypilot-kanban [config]="config"></daypilot-kanban>

config: DayPilot.KanbanConfig = {
  cards: [
    { id: 1, name: "Task 1", column: "1", text: "This is a description of task #1." },
    { id: 2, name: "Task 2", column: "1", text: "This is a description of task #2.", barColor: "#ea3624" }
  ],
  // ...
};

React

const cards = [
  { id: 1, name: "Task 1", column: "1", text: "This is a description of task #1." },
  { id: 2, name: "Task 2", column: "1", text: "This is a description of task #2.", barColor: "#ea3624" }
];

<DayPilotKanban
  cards={cards}
  {/* ... */}
/>

Vue

const cards = [
  { id: 1, name: "Task 1", column: "1", text: "This is a description of task #1." },
  { id: 2, name: "Task 2", column: "1", text: "This is a description of task #2.", barColor: "#ea3624" }
];

<DayPilotKanban
  :cards="cards"
  <!-- ... -->
/>

See Also

• Card Loading [doc.daypilot.org]

• Angular [doc.daypilot.org]

• DayPilot.Kanban Class