Skip to main content

DHTMLX Kanban. Unlimited user assignments per task example

Tasks that involve cross-functional collaboration often need more than one or two assignees. By default, the Kanban limits the number of user avatars displayed on a card, but you can remove this cap to show every assigned team member.

Live example​

const { Kanban, Toolbar, defaultEditorShape } = kanban;

const cardShape = {
    users: {
        show: true,
        values: users,
        maxCount: false // false | number - (optional) a maximum count of users displayed on the card
    },
    label: true,
    description: true,
    progress: true,
    comments: true,
    votes: true,
    start_date: true,
    end_date: true,
    priority: {
        show: true,
        values: [
            { id: 1, color: "#FF5252", label: "High", value: 1 },
            { id: 2, color: "#FFC975", label: "Medium", value: 2 },
            { id: 3, color: "#65D3B3", label: "Low", value: 3 },
        ],
    },
    color: true,
    menu: true,
    cover: true,
};

const board = new Kanban("#root", {
    columns,
    cards,
    rows,
    rowKey: "type",
    cardShape,
    editorShape: [
        ...defaultEditorShape,
        {
            type: "comments",
            key: "comments",
            label: "Comments",
            config: {
                placement: "editor",
            },
        },
    ],
    currentUser: 1,
});

new kanban.Toolbar("#toolbar", {
    api: board.api,
});
<!-- component containers -->
<div id="toolbar"></div>
<div id="root" style="height: calc(100% - 56px);"></div>

<!-- dataset -->

<script>
function buildDateFromMD(md){const params = new URLSearchParams(typeof location !== 'undefined' ? location.search : '');const fixed = params.get('fixedYear') || window.FIXED_YEAR;const year = fixed ? Number(fixed) : new Date().getFullYear();const [m,d] = md.split('/').map(Number);return new Date(year, m - 1, d);}

	const users = [
		{
			id: 1,
			label: "Steve Smith",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-1.jpg",
		},
		{
			id: 2,
			label: "Aaron Long",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-2.jpg",
		},
		{
			id: 3,
			label: "Angela Allen",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-3.jpg",
		},
		{
			id: 4,
			label: "Angela Long",
			avatar: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/user-4.jpg",
		},
		{
			id: 5,
			label: "Iris Manny",
		},
		{
			id: 7,
			label: "Greg Igvin",
		},
		{
			id: 8,
			label: "Frank Olvey",
		}
	];
    
    const columns = [
		{
			label: "Backlog",
			id: "backlog",
		},
		{
			label: "In progress",
			id: "inprogress",
		},
		{
			label: "Testing",
			id: "testing",
		},
		{
			label: "Done",
			id: "done",
		},
	];
    
    const rows = [
		{
			label: "Feature",
			id: "feature",
		},
		{
			label: "Task",
			id: "task",
		},
	];
    
    const cards = [
		{
			label: "Integration with Angular/React",
			priority: 1,
			color: "#65D3B3",
			start_date: buildDateFromMD("01/07"),
			users: [3, 2, 1, 4, 5, 6, 7, 8],
			column: "backlog",
			type: "feature",
            votes: [1],
            comments:[
                {
					id: 1,
					userId: 1,
					cardId: 1,
					text: "I look forward to seeing you at the integration meeting.",
					date: new Date(),
				},
            ]
		},
		{
			label: "Archive the cards/boards ",
			priority: 3,
			color: "#58C3FE",
			users: [1, 2, 3, 8],
			progress: 1,
			column: "backlog",
			type: "feature",
		},
		{
			label: "Searching and filtering",
			priority: 1,
			color: "#58C3FE",
			start_date: buildDateFromMD("01/09"),
			users: [3, 1],
			progress: 1,
			column: "backlog",
			type: "task",
		},
		{
			label: "Set the tasks priorities",
			color: "#FFC975",
			start_date: buildDateFromMD("12/21"),
			users: [4],
			progress: 75,
			column: "inprogress",
			type: "feature",
			attached: [
				{
					isCover: true,
					coverURL: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-1.jpg",
					previewURL: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-1.jpg",
					url: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-1.jpg",
					name: "img-1.jpg",
				},
			],
            votes: [2]
		},
		{
			label: "Custom icons",
			color: "#65D3B3",
			start_date: buildDateFromMD("01/07"),
			users: [3, 2],
			column: "inprogress",
			type: "task",
		},
		{
			label: "Integration with Gantt",
			color: "#FFC975",
			start_date: buildDateFromMD("12/21"),
			users: [4],
			progress: 75,
			column: "inprogress",
			type: "task",
		},
		{
			label: "Drag and drop",
			priority: 1,
			color: "#58C3FE",
			users: [3, 1],
			progress: 100,
			column: "testing",
			type: "feature",
		},
		{
			label: "Adding images",
			color: "#58C3FE",
			users: [4],
			column: "testing",
			type: "task",
			attached: [
				{
					isCover: true,
					coverURL: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-2.jpg",
					previewURL: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-2.jpg",
					url: "https://snippet.dhtmlx.com/codebase/data/kanban/01/img/img-2.jpg",
					name: "img-2.jpg",
				},
			],
		},
		{
			label: "Create cards and lists from the UI and from code",
			priority: 3,
			color: "#65D3B3",
			start_date: buildDateFromMD("01/07"),
			users: [3, 2],
			column: "done",
			type: "feature",
		},
		{
			label: "Draw swimlanes",
			color: "#FFC975",
			users: [2],
			column: "done",
			type: "feature",
		},
		{
			label: "Progress bar",
			priority: 1,
			color: "#FFC975",
			start_date: buildDateFromMD("12/9"),
			users: [1, 4, 3],
			progress: 100,
			column: "done",
			type: "task",
		},
	];
</script>

The code sets maxCount: false in the users section of cardShape. By default, the Kanban truncates the avatar list and shows a "+N" indicator when there are too many users. Setting maxCount to false disables this limit, displaying all assigned users on the card regardless of count. The users array on cards can contain any number of user IDs.

Solution overview​

  1. Define the users property in cardShape with maxCount: false
  2. Assign as many user IDs as needed in each card's users array
  3. All avatars will render on the card without truncation

Key points​

  • maxCount: false removes the cap: Without it, the Kanban shows a limited number of avatars plus a "+N" overflow indicator
  • maxCount can also be a number: Set maxCount: 3 to show at most 2 avatars and truncate the rest, useful for keeping cards compact (2 is the default limit)
  • Layout impact: Many avatars can widen the card footer. Test with your maximum expected user count to ensure the layout holds

API reference​

  • cardShape: Card appearance including users.maxCount

Additional resources​