Skip to main content

DHTMLX Kanban. Single user assignment per task example

Some workflows require exactly one person responsible per task: no shared ownership, no ambiguity about who's accountable. Switching from multi-user to single-user assignment changes both the card display and the editor control.

Live example​

const { Kanban } = kanban;
const { columns, cards, users } = getData();

cards.forEach(card => {
    if (card.users && Array.isArray(card.users)) card.users = card.users[0];
});
users.forEach(user => {
    if (user.avatar) user.avatar = "";
})

const cardShape = {
    label: true,
    description: true,
    progress: true,
    start_date: true,
    end_date: true,
    users: {
        show: true,
        values: users,
    },
    priority: true,
    color: true,
};

const editorShape = [
    {
        key: "label",
        type: "text",
        label: "Label",
    },
    {
        key: "description",
        type: "textarea",
        label: "Description",
    },
    {
        type: "combo",
        label: "Priority",
        key: "priority",
    },
    {
        type: "color",
        label: "Color",
        key: "color",
    },
    {
        type: "progress",
        key: "progress",
        label: "Progress",
    },
    {
        type: "date",
        key: "start_date",
        label: "Start date",
    },
    {
        type: "date",
        key: "end_date",
        label: "End date",
    },
    {
        type: "combo",
        key: "users",
        label: "Users",
        values: users, // optional if users are provided in cardShape
    },
]

const board = new Kanban("#root", {
    columns,
    cards,
    cardShape,
    editorShape,
});

<!-- component container -->
<div id="root" style="height: 100%;"></div>

<!-- dataset -->
<script src="https://snippet.dhtmlx.com/codebase/data/kanban/01/dataset.js"></script>

The code pre-processes cards to extract only the first user from each users array (card.users = card.users[0]), converting it from an array to a single value. The editor uses type: "combo" for the users field instead of type: "multiselect", which renders a single-select dropdown. The cardShape still uses users: { show: true, values: users } for display, but since each card now holds a single user ID rather than an array, only one avatar appears.

Solution overview​

  1. Pre-process cards to convert users from an array to a single value: card.users = card.users[0]
  2. Use type: "combo" in editorShape for the users field (instead of "multiselect")
  3. Keep users: { show: true, values: users } in cardShape for avatar display

Key points​

  • Data format matters: Single assignment stores users as a scalar (e.g., 3), not an array ([3]). This drives both the editor control type and card rendering
  • combo vs multiselect: type: "combo" renders a single-select dropdown; type: "multiselect" allows multiple selections. The editor field type must match the data format
  • Pre-processing is manual: The Kanban doesn't enforce single assignment. You need to transform the data before initialization

API reference​

  • cardShape: Card appearance including user display
  • editorShape: Editor field types and configuration

Additional resources​