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>
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: new Date("01/07/2021"),
			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: new Date("01/09/2021"),
			users: [3, 1],
			progress: 1,
			column: "backlog",
			type: "task",
		},
		{
			label: "Set the tasks priorities",
			color: "#FFC975",
			start_date: new Date("12/21/2020"),
			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: new Date("01/07/2021"),
			users: [3, 2],
			column: "inprogress",
			type: "task",
		},
		{
			label: "Integration with Gantt",
			color: "#FFC975",
			start_date: new Date("12/21/2020"),
			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: new Date("01/07/2021"),
			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: new Date("12/9/2020"),
			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​