@syncfusion/ej2-kanban - npm Package Compare versions

src/kanban/base/virtual-layout-render.d.ts

src/kanban/base/virtual-layout-render.js

styles/kanban/_material3-dark-definition.scss

styles/kanban/_material3-definition.scss

styles/kanban/icons/_material3-dark.scss

styles/kanban/material3-dark.css

styles/kanban/material3-dark.scss

styles/kanban/material3.css

styles/kanban/material3.scss

styles/material3-dark.css

styles/material3-dark.scss

styles/material3.css

styles/material3.scss

1

.eslintrc.json

		@@ -40,2 +40,3 @@ {
		"security/detect-new-buffer":"error",
		"security/detect-bidi-characters":"error",
		"@typescript-eslint/no-inferrable-types": "off",
		@@ -42,0 +43,0 @@ "@typescript-eslint/ban-types": ["warn", {

6

CHANGELOG.md

		@@ -5,2 +5,8 @@ # Changelog

		### Kanban

		#### New Features

		- Virtual Scrolling: This feature allows users to load data on demand when scrolling through columns for a smoother experience with large datasets.

		## 21.1.39 (2023-04-11)
		@@ -7,0 +13,0 @@

2

dist/global/index.d.ts

		/*!
		* filename: index.d.ts
		* version : 21.2.3
		* version : 22.1.34
		* Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
		@@ -5,0 +5,0 @@ * Use of this code is subject to the terms of our license.

32

package.json

		{
		"_from": "@syncfusion/ej2-kanban@*",
		"_id": "@syncfusion/ej2-kanban@21.1.39",
		"_id": "@syncfusion/ej2-kanban@21.3.0",
		"_inBundle": false,
		"_integrity": "sha512-FfKSw8adCjR3hIa6sKDMs9lV7r2XY1kafi1+Gmp8VwX2WI+OCH1jPglnf0NZPshxdq7pUfgd8beCCxkZ3H8yTg==",
		"_integrity": "sha512-WZWFriFoJfQuCuL4XPY+67kkQWqfS0eIBNtnbJXqUl1pQv37T5cabWPZ0FOo4MZGHbBaGM4CLUgPwd5kPQNfEQ==",
		"_location": "/@syncfusion/ej2-kanban",
		@@ -21,6 +21,9 @@ "_phantomChildren": {},
		"/",
		"/@syncfusion/ej2"
		"/@syncfusion/ej2",
		"/@syncfusion/ej2-angular-kanban",
		"/@syncfusion/ej2-react-kanban",
		"/@syncfusion/ej2-vue-kanban"
		],
		"_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-kanban/-/ej2-kanban-21.1.39.tgz",
		"_shasum": "20656b3ccbb3c5b7c632b784bb2ffc8e37fe67ac",
		"_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-kanban/-/ej2-kanban-21.3.0.tgz",
		"_shasum": "ac7d33c39dac58c62bb4af8da83719236f7e1b4a",
		"_spec": "@syncfusion/ej2-kanban@*",
		@@ -36,10 +39,11 @@ "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
		"dependencies": {
		"@syncfusion/ej2-base": "~21.2.3",
		"@syncfusion/ej2-buttons": "~21.2.3",
		"@syncfusion/ej2-data": "~21.2.3",
		"@syncfusion/ej2-dropdowns": "~21.2.3",
		"@syncfusion/ej2-inputs": "~21.2.3",
		"@syncfusion/ej2-layouts": "~21.2.3",
		"@syncfusion/ej2-navigations": "~21.2.3",
		"@syncfusion/ej2-popups": "~21.2.3"
		"@syncfusion/ej2-base": "~22.1.34",
		"@syncfusion/ej2-buttons": "~22.1.34",
		"@syncfusion/ej2-data": "~22.1.34",
		"@syncfusion/ej2-dropdowns": "~22.1.34",
		"@syncfusion/ej2-inputs": "~22.1.34",
		"@syncfusion/ej2-layouts": "~22.1.34",
		"@syncfusion/ej2-navigations": "~22.1.34",
		"@syncfusion/ej2-notifications": "~22.1.34",
		"@syncfusion/ej2-popups": "~22.1.34"
		},
		@@ -72,4 +76,4 @@ "deprecated": false,
		"typings": "index.d.ts",
		"version": "21.2.3",
		"version": "22.1.34",
		"sideEffects": false
		}

41

src/kanban/actions/action.js

		/* eslint-disable @typescript-eslint/no-explicit-any */
		import { closest, classList, createElement, remove, addClass, removeClass, isNullOrUndefined, formatUnit, createInstance, detach } from '@syncfusion/ej2-base';
		import { closest, classList, createElement, remove, addClass, removeClass, isNullOrUndefined as isNoU, formatUnit, createInstance, detach } from '@syncfusion/ej2-base';
		import { Columns } from '../models/columns';
		@@ -112,3 +112,8 @@ import * as events from '../base/constant';
		removeClass([target], cls.CARD_SELECTION_CLASS);
		_this.parent.layoutModule.disableAttributeSelection(target);
		if (_this.parent.enableVirtualization) {
		_this.parent.virtualLayoutModule.disableAttributeSelection(target);
		}
		else {
		_this.parent.layoutModule.disableAttributeSelection(target);
		}
		}
		@@ -151,3 +156,3 @@ else {
		var headerTarget = (e instanceof HTMLElement) ? e : e.target;
		var currentSwimlaneHeader = !isNullOrUndefined(isFrozenElem) ? isFrozenElem : headerTarget;
		var currentSwimlaneHeader = !isNoU(isFrozenElem) ? isFrozenElem : headerTarget;
		var args = { cancel: false, target: headerTarget, requestType: 'rowExpandCollapse' };
		@@ -217,3 +222,8 @@ this.parent.trigger(events.actionBegin, args, function (actionArgs) {
		if (this.parent.isAdaptive) {
		colGroup.forEach(function (col) { return col.style.width = formatUnit(_this.parent.layoutModule.getWidth()); });
		if (this.parent.enableVirtualization) {
		colGroup.forEach(function (col) { return col.style.width = formatUnit(_this.parent.virtualLayoutModule.getWidth()); });
		}
		else {
		colGroup.forEach(function (col) { return col.style.width = formatUnit(_this.parent.layoutModule.getWidth()); });
		}
		}
		@@ -254,4 +264,14 @@ classList(targetIcon, [cls.COLUMN_EXPAND_CLASS], [cls.COLUMN_COLLAPSE_CLASS]);
		var index = targetCol.cellIndex;
		var text = (this_1.parent.columns[index].showItemCount ? '[' +
		targetCol.querySelectorAll('.' + cls.CARD_CLASS).length + '] ' : '') + this_1.parent.columns[index].headerText;
		var text = void 0;
		if (!this_1.parent.enableVirtualization) {
		text = (this_1.parent.columns[index].showItemCount ? '[' +
		targetCol.querySelectorAll('.' + cls.CARD_CLASS).length + '] ' : '') + this_1.parent.columns[index].headerText;
		}
		else {
		var value = this_1.parent.dataModule.isRemote() ?
		this_1.parent.columnDataCount[this_1.parent.columns[index].keyField]
		: this_1.parent.virtualLayoutModule.columnData[this_1.parent.columns[index].keyField].length;
		text = (this_1.parent.columns[index].showItemCount ? '[' +
		value + '] ' : '') + this_1.parent.columns[index].headerText;
		}
		targetCol.appendChild(createElement('div', { className: cls.COLLAPSE_HEADER_TEXT_CLASS, innerHTML: text }));
		@@ -287,3 +307,3 @@ addClass([targetCol, target], cls.COLLAPSED_CLASS);
		var contentRow = closest(target, '.' + cls.CONTENT_ROW_CLASS);
		var index = !isNullOrUndefined(this.lastSelectionRow) ? this.lastSelectionRow.rowIndex : contentRow.rowIndex;
		var index = !isNoU(this.lastSelectionRow) ? this.lastSelectionRow.rowIndex : contentRow.rowIndex;
		if (index !== contentRow.rowIndex && (isCtrl \|\| isShift) && this.parent.cardSettings.selectionType === 'Multiple') {
		@@ -294,3 +314,8 @@ return;
		removeClass(cards, cls.CARD_SELECTION_CLASS);
		this.parent.layoutModule.disableAttributeSelection(cards);
		if (this.parent.enableVirtualization) {
		this.parent.virtualLayoutModule.disableAttributeSelection(cards);
		}
		else {
		this.parent.layoutModule.disableAttributeSelection(cards);
		}
		cards.forEach(function (el) {
		@@ -297,0 +322,0 @@ _this.selectionArray.splice(_this.selectionArray.indexOf(el.getAttribute('data-id')), 1);

2

src/kanban/actions/crud.d.ts

		@@ -16,5 +16,5 @@ import { Kanban } from '../base/kanban';
		private getIndexFromData;
		updateCard(cardData: Record<string, any> \| Record<string, any>[], index?: number): void;
		updateCard(cardData: Record<string, any> \| Record<string, any>[], index?: number, isDropped?: boolean, dataDropIndexKeyFieldValue?: string, draggedKey?: string, droppedKey?: string, isMultipleDrag?: boolean): void;
		deleteCard(cardData: string \| number \| Record<string, any> \| Record<string, any>[]): void;
		private priorityOrder;
		}

13

src/kanban/actions/crud.js

		@@ -1,2 +0,2 @@
		import { isNullOrUndefined, closest } from '@syncfusion/ej2-base';
		import { isNullOrUndefined as isNoU, closest } from '@syncfusion/ej2-base';
		import * as events from '../base/constant';
		@@ -77,3 +77,3 @@ import * as cls from '../base/css-constant';
		};
		Crud.prototype.updateCard = function (cardData, index) {
		Crud.prototype.updateCard = function (cardData, index, isDropped, dataDropIndexKeyFieldValue, draggedKey, droppedKey, isMultipleDrag) {
		var _this = this;
		@@ -84,3 +84,3 @@ var args = {
		};
		index = isNullOrUndefined(index) ? this.getIndexFromData(args.changedRecords[0]) : index;
		index = isNoU(index) ? this.getIndexFromData(args.changedRecords[0]) : index;
		this.parent.trigger(events.actionBegin, args, function (updateArgs) {
		@@ -102,3 +102,3 @@ if (!updateArgs.cancel) {
		var type = (cardData instanceof Array) ? 'batch' : 'update';
		_this.parent.dataModule.updateDataManager(type, editParms, 'cardChanged', cardData, index);
		_this.parent.dataModule.updateDataManager(type, editParms, 'cardChanged', cardData, index, isDropped, dataDropIndexKeyFieldValue, draggedKey, droppedKey, isMultipleDrag);
		}
		@@ -142,3 +142,4 @@ });
		});
		columnAllDatas = this_1.parent.layoutModule.getColumnData(columnKey);
		columnAllDatas = this_1.parent.enableVirtualization ? this_1.parent.virtualLayoutModule.getColumnData(columnKey)
		: this_1.parent.layoutModule.getColumnData(columnKey);
		for (var _i = 0, _a = keyData; _i < _a.length; _i++) {
		@@ -152,3 +153,3 @@ var data = _a[_i];
		keyData.forEach(function (key) { return finalData.push(key); });
		if (!isNullOrUndefined(cardIndex)) {
		if (!isNoU(cardIndex)) {
		var _loop_2 = function (j) {
		@@ -155,0 +156,0 @@ columnAllDatas.filter(function (data, index) {

11

src/kanban/actions/dialog.js

		@@ -149,7 +149,11 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
		if (field.key === this.parent.keyField) {
		var currentKeys = this.parent.layoutModule.columnKeys;
		var currentKeys = this.parent.enableVirtualization ?
		this.parent.virtualLayoutModule.columnKeys : this.parent.layoutModule.columnKeys;
		if (this.parent.actionModule.hideColumnKeys.length > 0) {
		currentKeys = [];
		for (var i = 0; i < this.parent.columns.length; i++) {
		if (this.parent.layoutModule.isColumnVisible(this.parent.columns[i])) {
		var isColumnVisible = this.parent.enableVirtualization ?
		this.parent.virtualLayoutModule.isColumnVisible(this.parent.columns[i]) :
		this.parent.layoutModule.isColumnVisible(this.parent.columns[i]);
		if (isColumnVisible) {
		var isNumeric = typeof this.parent.columns[i].keyField === 'number';
		@@ -169,3 +173,4 @@ if (isNumeric) {
		dropDownOptions = {
		dataSource: [].slice.call(this.parent.layoutModule.kanbanRows),
		dataSource: [].slice.call(this.parent.enableVirtualization ? this.parent.virtualLayoutModule.kanbanRows :
		this.parent.layoutModule.kanbanRows),
		fields: { text: 'textField', value: 'keyField' }, value: fieldValue
		@@ -172,0 +177,0 @@ };

1

src/kanban/actions/drag.d.ts

		@@ -28,2 +28,3 @@ import { Kanban } from '../base/kanban';
		private removeElement;
		private isTargetElementVisible;
		private externalDrop;
		@@ -30,0 +31,0 @@ private multiCloneCreate;

103

src/kanban/actions/drag.js

		/* eslint-disable @typescript-eslint/no-explicit-any */
		import { Draggable, formatUnit, createElement, isNullOrUndefined, addClass, closest } from '@syncfusion/ej2-base';
		import { Draggable, formatUnit, createElement, isNullOrUndefined as isNoU, addClass, closest } from '@syncfusion/ej2-base';
		import { removeClass, classList, remove, EventHandler, extend } from '@syncfusion/ej2-base';
		@@ -51,3 +51,3 @@ import * as cls from '../base/css-constant';
		this.dragObj.element = closest(e.sender.target, '.' + cls.CARD_CLASS);
		if (isNullOrUndefined(this.dragObj.element)) {
		if (isNoU(this.dragObj.element)) {
		return null;
		@@ -83,2 +83,10 @@ }
		}
		if (!isNoU(this.dragObj.selectedCards) && !isNoU(this.dragObj.selectedCards.length) &&
		this.dragObj.selectedCards.length >= 1) {
		this.dragObj.selectedCards[0].closest('.e-content-cells').classList.add('e-dragged-column');
		}
		else if (!isNoU(this.dragObj.selectedCards) &&
		!isNoU(this.dragObj.selectedCards.closest('.e-content-cells'))) {
		this.dragObj.selectedCards.closest('.e-content-cells').classList.add('e-dragged-column');
		}
		var dragArgs = { cancel: false, data: this.dragObj.cardDetails, event: e, element: this.dragObj.selectedCards };
		@@ -106,3 +114,8 @@ this.parent.trigger(events.dragStart, dragArgs, function (dragEventArgs) {
		classList(_this.dragObj.cloneElement, ['e-multi-card-clone'], [cls.CARD_SELECTION_CLASS]);
		_this.parent.layoutModule.disableAttributeSelection(_this.dragObj.cloneElement);
		if (_this.parent.enableVirtualization) {
		_this.parent.virtualLayoutModule.disableAttributeSelection(_this.dragObj.cloneElement);
		}
		else {
		_this.parent.layoutModule.disableAttributeSelection(_this.dragObj.cloneElement);
		}
		_this.dragObj.cloneElement.style.width = '90px';
		@@ -132,2 +145,6 @@ }
		var cardElement = closest(e.target, '.' + cls.ROOT_CLASS + ' .' + cls.CARD_CLASS);
		if (!isNoU(cardElement) && this.parent.enableVirtualization && !isNoU(e.target.previousElementSibling) &&
		!isNoU(e.target.previousElementSibling.querySelector('.e-target-dropped-clone'))) {
		cardElement = e.target.previousElementSibling.querySelector('.e-target-dropped-clone').nextElementSibling;
		}
		var target = cardElement \|\| e.target;
		@@ -161,3 +178,3 @@ var selector = '.' + cls.CONTENT_ROW_CLASS + ':not(.' + cls.SWIMLANE_ROW_CLASS + ') .' + cls.CONTENT_CELLS_CLASS
		this.insertClone = 'afterend';
		if (isNullOrUndefined(element)) {
		if (isNoU(element)) {
		var pageY = target.classList.contains(cls.DRAGGED_CLONE_CLASS) ? (this.dragObj.pageY / 2) :
		@@ -172,2 +189,5 @@ this.dragObj.pageY;
		if (target.classList.contains(cls.CARD_CLASS)) {
		if (this.parent.enableVirtualization) {
		this.insertClone = this.isTargetElementVisible(target) ? this.insertClone : 'beforebegin';
		}
		target.insertAdjacentElement(this.insertClone, this.dragObj.targetClone);
		@@ -192,3 +212,5 @@ }
		&& this.dragObj.targetClone && (!dropElement \|\| !dropElement.classList.contains(cls.DROPPED_CLONE_CLASS))) {
		target.nextElementSibling.appendChild(this.dragObj.targetClone);
		if (!this.parent.enableVirtualization && !this.isTargetElementVisible(target.nextElementSibling)) {
		target.nextElementSibling.appendChild(this.dragObj.targetClone);
		}
		}
		@@ -214,3 +236,3 @@ }
		}
		if (target && target.tagName === 'TABLE' && !isNullOrUndefined(target.querySelector('.' + cls.CONTENT_ROW_CLASS))) {
		if (target && target.tagName === 'TABLE' && !isNoU(target.querySelector('.' + cls.CONTENT_ROW_CLASS))) {
		cellDimension = target.querySelector('.' + cls.CONTENT_ROW_CLASS).getBoundingClientRect();
		@@ -267,2 +289,14 @@ this.updateDimension(cellDimension, target);
		};
		DragAndDrop.prototype.isTargetElementVisible = function (targetElem) {
		var wrapperElem = closest(targetElem, '.' + cls.CARD_WRAPPER_CLASS);
		if (!isNoU(wrapperElem)) {
		var wrapperElemBottom = wrapperElem.getBoundingClientRect().bottom;
		var targetElemBottom = targetElem.getBoundingClientRect().bottom;
		if (targetElemBottom > wrapperElemBottom) {
		return false;
		}
		return true;
		}
		return true;
		};
		DragAndDrop.prototype.externalDrop = function (target) {
		@@ -403,4 +437,9 @@ var _this = this;
		var contentCell = closest(this.dragObj.targetClone, '.' + cls.CONTENT_CELLS_CLASS);
		if (this.parent.enableVirtualization && !isNoU(contentCell)) {
		contentCell.classList.add('e-dropped-column');
		}
		var columnKey;
		var dropIndex;
		var dataDropIndexKeyfieldValue;
		var isMultipleDrag;
		EventHandler.remove(document.body, 'keydown', this.keydownHandler);
		@@ -411,10 +450,13 @@ [].slice.call(this.borderElm).forEach(function (element) {
		if (this.dragObj.targetClone.parentElement) {
		var isMultipleDrag = (this.dragObj.selectedCards && this.dragObj.selectedCards.length > 1
		isMultipleDrag = (this.dragObj.selectedCards && this.dragObj.selectedCards.length > 1
		&& this.parent.sortSettings.sortBy === 'Index');
		var className = !isMultipleDrag ? '.' + cls.CARD_CLASS + ':not(.' + cls.DRAGGED_CARD_CLASS + '),.' + cls.DROPPED_CLONE_CLASS :
		'.' + cls.CARD_CLASS + ',.' + cls.DROPPED_CLONE_CLASS;
		var className = !isMultipleDrag ? '.' + cls.CARD_CLASS + ':not(.' + cls.DRAGGED_CARD_CLASS + ', .' + cls.CLONED_CARD_CLASS + '),.' + cls.DROPPED_CLONE_CLASS :
		'.' + cls.CARD_CLASS + ':not(.' + cls.CLONED_CARD_CLASS + '),.' + cls.DROPPED_CLONE_CLASS;
		var element = [].slice.call(this.dragObj.targetClone.parentElement.querySelectorAll(className));
		dropIndex = !isMultipleDrag ? element.indexOf(this.dragObj.targetClone) : element.indexOf(this.dragObj.targetClone) - 1;
		dropIndex = element.indexOf(this.dragObj.targetClone);
		if (this.parent.enableVirtualization && !isNoU(this.dragObj.targetClone.nextElementSibling)) {
		dataDropIndexKeyfieldValue = this.dragObj.targetClone.nextElementSibling.getAttribute('data-id');
		}
		}
		if (!isNullOrUndefined(this.kanbanObj) && this.kanbanObj.element.querySelector('.' + cls.TARGET_MULTI_CLONE_CLASS)) {
		if (!isNoU(this.kanbanObj) && this.kanbanObj.element.querySelector('.' + cls.TARGET_MULTI_CLONE_CLASS)) {
		columnKey = closest(e.target, '.' + cls.MULTI_COLUMN_KEY_CLASS + ':not(.' + cls.DISABLED_CLASS + ')');
		@@ -455,3 +497,13 @@ }
		dragEventArgs.data[0];
		_this.parent.crudModule.updateCard(updateCard, dragEventArgs.dropIndex);
		var draggedColumnKey = void 0;
		var droppedColumnKey = void 0;
		if (_this.parent.enableVirtualization) {
		draggedColumnKey = contentCell.closest('.e-kanban').querySelector('.e-dragged-column').getAttribute('data-key');
		droppedColumnKey = contentCell.getAttribute('data-key');
		}
		_this.parent.crudModule.updateCard(updateCard, dragEventArgs.dropIndex, true, dataDropIndexKeyfieldValue, draggedColumnKey, droppedColumnKey, isMultipleDrag);
		if (_this.parent.enableVirtualization) {
		_this.parent.virtualLayoutModule.refreshColumnData(draggedColumnKey, droppedColumnKey);
		_this.parent.virtualLayoutModule.ensureColumnNotEmpty(draggedColumnKey);
		}
		}
		@@ -496,2 +548,8 @@ }
		}
		if (this.parent.element.querySelector('.e-dragged-column')) {
		this.parent.element.querySelector('.e-dragged-column').classList.remove('e-dragged-column');
		}
		if (this.parent.element.querySelector('.e-dropped-column')) {
		this.parent.element.querySelector('.e-dropped-column').classList.remove('e-dropped-column');
		}
		this.dragObj.cardDetails = this.dragObj.modifiedData = [];
		@@ -525,4 +583,5 @@ this.isDragging = false;
		if (this.kanbanObj.sortSettings.direction === 'Ascending') {
		element = (draggedCard === this.dragObj.targetClone.previousElementSibling) && (this.dragObj.targetClone.previousElementSibling &&
		this.dragObj.targetClone.previousElementSibling.previousElementSibling) ?
		element = (draggedCard === this.dragObj.targetClone.previousElementSibling) &&
		(this.dragObj.targetClone.previousElementSibling &&
		this.dragObj.targetClone.previousElementSibling.previousElementSibling) ?
		this.dragObj.targetClone.previousElementSibling.previousElementSibling : this.dragObj.targetClone.previousElementSibling;
		@@ -582,3 +641,3 @@ }
		DragAndDrop.prototype.multiCloneRemove = function () {
		var cloneMulti = !isNullOrUndefined(this.kanbanObj) ? [].slice.call(this.kanbanObj.element.querySelectorAll('.' + cls.TARGET_MULTI_CLONE_CLASS)) : [];
		var cloneMulti = !isNoU(this.kanbanObj) ? [].slice.call(this.kanbanObj.element.querySelectorAll('.' + cls.TARGET_MULTI_CLONE_CLASS)) : [];
		if (cloneMulti.length > 0) {
		@@ -622,3 +681,3 @@ var columnKey = [].slice.call(this.kanbanObj.element.querySelectorAll('.' + cls.MULTI_COLUMN_KEY_CLASS));
		var _this = this;
		if (isNullOrUndefined(this.dragObj.navigationInterval)) {
		if (isNoU(this.dragObj.navigationInterval)) {
		this.dragObj.navigationInterval = window.setInterval(function () { _this.autoScroll(); }, 100);
		@@ -676,3 +735,5 @@ }
		if (xIsScrollable && xInBounds && (this.dragEdges.left \|\| this.dragEdges.right)) {
		var scroll_1 = (this.kanbanObj.layoutModule.getWidth() * (this.kanbanObj.columns.length - 1)) >
		var width = this.parent.enableVirtualization ? this.kanbanObj.virtualLayoutModule.getWidth() :
		this.kanbanObj.layoutModule.getWidth();
		var scroll_1 = (width * (this.kanbanObj.columns.length - 1)) >
		parent_1.scrollLeft;
		@@ -716,5 +777,7 @@ if (scroll_1 \|\| this.dragEdges.left) {
		DragAndDrop.prototype.unWireDragEvents = function (element) {
		var dragInstance = element.ej2_instances[0];
		if (dragInstance && !dragInstance.isDestroyed) {
		dragInstance.destroy();
		if (!isNoU(element) && !isNoU(element.ej2_instances[0])) {
		var dragInstance = element.ej2_instances[0];
		if (dragInstance && !dragInstance.isDestroyed) {
		dragInstance.destroy();
		}
		}
		@@ -721,0 +784,0 @@ };

14

src/kanban/actions/keyboard.js

		@@ -125,3 +125,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
		removeClass([selectedCard], cls.CARD_SELECTION_CLASS);
		this.parent.layoutModule.disableAttributeSelection(selectedCard);
		if (this.parent.enableVirtualization) {
		this.parent.virtualLayoutModule.disableAttributeSelection(selectedCard);
		}
		else {
		this.parent.layoutModule.disableAttributeSelection(selectedCard);
		}
		var selection = this.parent.actionModule.selectionArray;
		@@ -198,3 +203,8 @@ selection.splice(selection.indexOf(selectedCard.getAttribute('data-id')), 1);
		removeClass(cards, cls.CARD_SELECTION_CLASS);
		this.parent.layoutModule.disableAttributeSelection(cards);
		if (this.parent.enableVirtualization) {
		this.parent.virtualLayoutModule.disableAttributeSelection(cards);
		}
		else {
		this.parent.layoutModule.disableAttributeSelection(cards);
		}
		}
		@@ -201,0 +211,0 @@ this.multiSelection = false;

4

src/kanban/actions/tooltip.js

		/* eslint-disable @typescript-eslint/no-explicit-any */
		import { createElement, append, closest, addClass } from '@syncfusion/ej2-base';
		import { createElement, append, closest, addClass, initializeCSPTemplate } from '@syncfusion/ej2-base';
		import { Tooltip } from '@syncfusion/ej2-popups';
		@@ -49,3 +49,3 @@ import * as cls from '../base/css-constant';
		else {
		tooltipContent = "<div class=\"e-card-header-caption\">" + args.target.innerText + "</div>";
		tooltipContent = initializeCSPTemplate(function () { return "<div class=\"e-card-header-caption\">" + args.target.innerText + "</div>"; });
		}
		@@ -52,0 +52,0 @@ this.tooltipObj.setProperties({ content: tooltipContent }, true);

2

src/kanban/base/css-constant.d.ts

		@@ -61,2 +61,4 @@ /**
		/** @private */
		export declare const CARD_VIRTUAL_WRAPPER_CLASS: string;
		/** @private */
		export declare const CARD_CLASS: string;
		@@ -63,0 +65,0 @@ /** @private */

2

src/kanban/base/css-constant.js

		@@ -61,2 +61,4 @@ /**
		/** @private */
		export var CARD_VIRTUAL_WRAPPER_CLASS = 'e-card-virtual-wrapper';
		/** @private */
		export var CARD_CLASS = 'e-card';
		@@ -63,0 +65,0 @@ /** @private */

31

src/kanban/base/data.d.ts

		@@ -31,8 +31,19 @@ import { DataManager, Query } from '@syncfusion/ej2-data';
		/**
		* @returns {boolean} returns whether its remote data
		* @hidden
		*/
		isRemote(): boolean;
		/**
		* @returns {boolean} returns the column key fields
		* @hidden
		*/
		private columnKeyFields;
		/**
		* The function used to generate updated Query from schedule model
		*
		* @param {string} parameter Accepts the parameter that needs to be sent to the service end.
		* @returns {void}
		* @private
		*/
		getQuery(): Query;
		getQuery(parameter?: string): Query;
		/**
		@@ -73,2 +84,10 @@ * The function used to get dataSource by executing given Query
		/**
		* The function is used to handle the update the column data count for remote, and update kanbanData while perform the CRUD action
		*
		* @param {ReturnType} args Accepts the dataManager success result
		* @returns {void}
		* @private
		*/
		private updateKanbanData;
		/**
		* The function is used to handle the failure response from dataManager
		@@ -89,6 +108,11 @@ *
		* @param {number} index Accepts the index to refresh the data into UI
		* @param {boolean} isDropped Accepts the boolean value based on based if it is dragged and dropped
		* @param {string} dataDropIndexKeyFieldValue Accepts the dropped index key field value card
		* @param {number} draggedKey Accepts the dragged keyfield of the column
		* @param {number} droppedKey Accepts the dropped keyfield of the column
		* @param {number} isMultipleDrag Accepts boolean value based on the multiple drag of the cards
		* @returns {void}
		* @private
		*/
		updateDataManager(updateType: string, params: SaveChanges, type: string, data: Record<string, any>, index?: number): void;
		updateDataManager(updateType: string, params: SaveChanges, type: string, data: Record<string, any>, index?: number, isDropped?: boolean, dataDropIndexKeyFieldValue?: string, draggedKey?: string, droppedKey?: string, isMultipleDrag?: boolean): void;
		private modifyArrayData;
		@@ -100,5 +124,6 @@ /**
		* @param {number} position Accepts the index to refresh UI.
		* @param {boolean} isDropped Accepts the boolean value based on based if it is dragged and dropped
		* @returns {void}
		*/
		refreshUI(args: ActionEventArgs, position: number): void;
		refreshUI(args: ActionEventArgs, position: number, isDropped?: boolean): void;
		}

217

src/kanban/base/data.js

		/* eslint-disable @typescript-eslint/no-explicit-any */
		import { extend } from '@syncfusion/ej2-base';
		import { extend, isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';
		import { DataManager, Query, Deferred, UrlAdaptor } from '@syncfusion/ej2-data';
		@@ -37,9 +37,54 @@ import * as events from './constant';
		/**
		* @returns {boolean} returns whether its remote data
		* @hidden
		*/
		Data.prototype.isRemote = function () {
		return this.dataManager.dataSource.offline !== true && this.dataManager.dataSource.url !== undefined &&
		this.dataManager.dataSource.url !== '';
		};
		/**
		* @returns {boolean} returns the column key fields
		* @hidden
		*/
		Data.prototype.columnKeyFields = function () {
		var columns = [];
		for (var _i = 0, _a = this.parent.columns; _i < _a.length; _i++) {
		var column = _a[_i];
		if (column.keyField.toString().split(',').length > 1) {
		for (var _b = 0, _c = column.keyField.toString().split(','); _b < _c.length; _b++) {
		var innerColumns = _c[_b];
		columns.push(innerColumns.trim());
		}
		}
		else {
		columns.push(column.keyField.toString());
		}
		}
		return columns;
		};
		/**
		* The function used to generate updated Query from schedule model
		*
		* @param {string} parameter Accepts the parameter that needs to be sent to the service end.
		* @returns {void}
		* @private
		*/
		Data.prototype.getQuery = function () {
		return this.query.clone();
		Data.prototype.getQuery = function (parameter) {
		var query = this.query.clone();
		if (this.isRemote() && this.parent.enableVirtualization) {
		var cardHeight = this.parent.cardHeight === 'auto' ? 100 :
		parseInt(formatUnit(this.parent.cardHeight).split('px')[0], 10);
		var take = this.parent.height === 'auto' ? (Math.ceil(window.innerHeight / cardHeight) * 2) :
		(Math.ceil(parseInt(formatUnit(this.parent.height).split('px')[0], 10) / cardHeight) * 2);
		var columns = this.columnKeyFields();
		for (var i = 0; i < columns.length; i++) {
		query.where(this.parent.keyField, 'equal', columns[i]);
		}
		query.take(take);
		if (isNullOrUndefined(parameter)) {
		parameter = 'KanbanVirtualization';
		}
		query.addParams('KanbanVirtualization', parameter);
		}
		return query;
		};
		@@ -144,3 +189,5 @@ /**
		var dataManager = this.getData(this.getQuery());
		dataManager.then(function (e) { return _this.dataManagerSuccess(e); }).catch(function (e) { return _this.dataManagerFailure(e); });
		dataManager.then(function (e) {
		return _this.dataManagerSuccess(e);
		}).catch(function (e) { return _this.dataManagerFailure(e); });
		};
		@@ -161,10 +208,11 @@ /**
		if (type) {
		var resultData = extend([], e.result, null, true);
		this.parent.kanbanData = resultData;
		this.updateKanbanData(e);
		if (this.parent.enableVirtualization && this.isRemote()) {
		this.parent.virtualLayoutModule.refresh();
		}
		}
		else {
		this.parent.trigger(events.dataBinding, e, function (args) {
		var resultData = extend([], args.result, null, true);
		_this.parent.kanbanData = resultData;
		_this.parent.notify(events.dataReady, { processedData: resultData });
		_this.updateKanbanData(args);
		_this.parent.notify(events.dataReady, { processedData: _this.parent.kanbanData });
		_this.parent.trigger(events.dataBound, null, function () { return _this.parent.hideSpinner(); });
		@@ -175,2 +223,23 @@ });
		/**
		* The function is used to handle the update the column data count for remote, and update kanbanData while perform the CRUD action
		*
		* @param {ReturnType} args Accepts the dataManager success result
		* @returns {void}
		* @private
		*/
		Data.prototype.updateKanbanData = function (args) {
		var resultData = extend([], !isNullOrUndefined(args.result.result) ?
		args.result.result : args.result, null, true);
		if (this.isRemote() && this.parent.enableVirtualization && resultData.length > 0
		&& !isNullOrUndefined(args.result.count)) {
		var columnsKeyFields = this.columnKeyFields();
		for (var i = 0; i < columnsKeyFields.length; i++) {
		if (args.result.count[i].Key === columnsKeyFields[i]) {
		this.parent.columnDataCount[columnsKeyFields[i]] = args.result.count[i].Value;
		}
		}
		}
		this.parent.kanbanData = resultData;
		};
		/**
		* The function is used to handle the failure response from dataManager
		@@ -197,6 +266,11 @@ *
		* @param {number} index Accepts the index to refresh the data into UI
		* @param {boolean} isDropped Accepts the boolean value based on based if it is dragged and dropped
		* @param {string} dataDropIndexKeyFieldValue Accepts the dropped index key field value card
		* @param {number} draggedKey Accepts the dragged keyfield of the column
		* @param {number} droppedKey Accepts the dropped keyfield of the column
		* @param {number} isMultipleDrag Accepts boolean value based on the multiple drag of the cards
		* @returns {void}
		* @private
		*/
		Data.prototype.updateDataManager = function (updateType, params, type, data, index) {
		Data.prototype.updateDataManager = function (updateType, params, type, data, index, isDropped, dataDropIndexKeyFieldValue, draggedKey, droppedKey, isMultipleDrag) {
		var _this = this;
		@@ -218,3 +292,11 @@ this.parent.showSpinner();
		case 'update':
		promise = _this.dataManager.update(_this.keyField, data, _this.getTable(), _this.getQuery());
		if (_this.parent.enableVirtualization && !_this.parent.dataModule.isRemote() && isDropped) {
		promise = _this.dataManager.remove(_this.keyField, data, _this.getTable(), _this.getQuery());
		promise = _this.dataManager.insert(data, _this.getTable(), _this.getQuery(), _this.dataManager.dataSource.json.findIndex(function (data) {
		return data[_this.parent.cardSettings.headerField] === dataDropIndexKeyFieldValue;
		}));
		}
		else {
		promise = _this.dataManager.update(_this.keyField, data, _this.getTable(), _this.getQuery());
		}
		break;
		@@ -225,3 +307,16 @@ case 'delete':
		case 'batch':
		promise = _this.dataManager.saveChanges(params, _this.keyField, _this.getTable(), _this.getQuery());
		if (!_this.parent.dataModule.isRemote() && isDropped && _this.parent.enableVirtualization && data) {
		for (var i = 0; i < data.length; i++) {
		promise = _this.dataManager.remove(_this.keyField, data[i], _this.getTable(), _this.getQuery());
		}
		var currentIndex = _this.dataManager.dataSource.json.findIndex(function (data) {
		return data[_this.parent.cardSettings.headerField] === dataDropIndexKeyFieldValue;
		});
		for (var i = 0; i < data.length; i++, currentIndex++) {
		promise = _this.dataManager.insert(data[i], _this.getTable(), _this.getQuery(), currentIndex);
		}
		}
		else {
		promise = _this.dataManager.saveChanges(params, _this.keyField, _this.getTable(), _this.getQuery());
		}
		break;
		@@ -233,3 +328,7 @@ }
		_this.parent.kanbanData = _this.dataManager.dataSource.json;
		_this.refreshUI(offlineArgs, index);
		index = draggedKey === droppedKey && isMultipleDrag ? index - 1 : index;
		_this.refreshUI(offlineArgs, index, isDropped);
		if (_this.parent.enableVirtualization) {
		_this.parent.virtualLayoutModule.refreshColumnData(draggedKey, droppedKey, offlineArgs.requestType, data[_this.parent.keyField]);
		}
		}
		@@ -268,3 +367,7 @@ }
		}
		_this.refreshUI(offlineArgs, index);
		index = draggedKey === droppedKey && isMultipleDrag ? index - 1 : index;
		_this.refreshUI(offlineArgs, index, isDropped);
		if (_this.parent.enableVirtualization) {
		_this.parent.virtualLayoutModule.refreshColumnData(draggedKey, droppedKey, offlineArgs.requestType, data[_this.parent.keyField]);
		}
		}).catch(function (e) {
		@@ -290,35 +393,65 @@ _this.dataManagerFailure(e);
		* @param {number} position Accepts the index to refresh UI.
		* @param {boolean} isDropped Accepts the boolean value based on based if it is dragged and dropped
		* @returns {void}
		*/
		Data.prototype.refreshUI = function (args, position) {
		Data.prototype.refreshUI = function (args, position, isDropped) {
		var _this = this;
		this.parent.layoutModule.columnData = this.parent.layoutModule.getColumnCards();
		if (this.parent.swimlaneSettings.keyField) {
		this.parent.layoutModule.kanbanRows = this.parent.layoutModule.getRows();
		this.parent.layoutModule.swimlaneData = this.parent.layoutModule.getSwimlaneCards();
		if (this.parent.enableVirtualization) {
		this.parent.virtualLayoutModule.columnData = this.parent.virtualLayoutModule.getColumnCards();
		args.addedRecords.forEach(function (data, index) {
		_this.parent.virtualLayoutModule.renderCardBasedOnIndex(data, position + index, isDropped, args.requestType);
		});
		args.changedRecords.forEach(function (data) {
		_this.parent.virtualLayoutModule.removeCard(data);
		_this.parent.virtualLayoutModule.renderCardBasedOnIndex(data, position, isDropped, args.requestType);
		if (_this.parent.virtualLayoutModule.isSelectedCard) {
		_this.parent.actionModule.SingleCardSelection(data);
		}
		if (_this.parent.sortSettings.field && _this.parent.sortSettings.sortBy === 'Index'
		&& _this.parent.sortSettings.direction === 'Descending' && position > 0) {
		--position;
		}
		else {
		position++;
		}
		});
		args.deletedRecords.forEach(function (data) {
		_this.parent.virtualLayoutModule.removeCard(data);
		});
		this.parent.virtualLayoutModule.refresh();
		}
		args.addedRecords.forEach(function (data, index) {
		if (_this.parent.swimlaneSettings.keyField && !data[_this.parent.swimlaneSettings.keyField]) {
		data[_this.parent.swimlaneSettings.keyField] = '';
		else {
		this.parent.layoutModule.columnData = this.parent.layoutModule.getColumnCards();
		if (this.parent.swimlaneSettings.keyField) {
		this.parent.layoutModule.kanbanRows = this.parent.layoutModule.getRows();
		this.parent.layoutModule.swimlaneData = this.parent.layoutModule.getSwimlaneCards();
		}
		_this.parent.layoutModule.renderCardBasedOnIndex(data, position + index);
		});
		args.changedRecords.forEach(function (data) {
		if (_this.parent.swimlaneSettings.keyField && !data[_this.parent.swimlaneSettings.keyField]) {
		data[_this.parent.swimlaneSettings.keyField] = '';
		}
		_this.parent.layoutModule.removeCard(data);
		_this.parent.layoutModule.renderCardBasedOnIndex(data, position);
		if (_this.parent.layoutModule.isSelectedCard) {
		_this.parent.actionModule.SingleCardSelection(data);
		}
		if (_this.parent.sortSettings.field && _this.parent.sortSettings.sortBy === 'Index'
		&& _this.parent.sortSettings.direction === 'Descending' && position > 0) {
		--position;
		}
		});
		args.deletedRecords.forEach(function (data) {
		_this.parent.layoutModule.removeCard(data);
		});
		this.parent.layoutModule.refresh();
		args.addedRecords.forEach(function (data, index) {
		if (_this.parent.swimlaneSettings.keyField && !data[_this.parent.swimlaneSettings.keyField]) {
		data[_this.parent.swimlaneSettings.keyField] = '';
		}
		_this.parent.layoutModule.renderCardBasedOnIndex(data, position + index);
		});
		args.changedRecords.forEach(function (data) {
		if (_this.parent.swimlaneSettings.keyField && !data[_this.parent.swimlaneSettings.keyField]) {
		data[_this.parent.swimlaneSettings.keyField] = '';
		}
		_this.parent.layoutModule.removeCard(data);
		_this.parent.layoutModule.renderCardBasedOnIndex(data, position);
		if (_this.parent.layoutModule.isSelectedCard) {
		_this.parent.actionModule.SingleCardSelection(data);
		}
		if (_this.parent.sortSettings.field && _this.parent.sortSettings.sortBy === 'Index'
		&& _this.parent.sortSettings.direction === 'Descending' && position > 0) {
		--position;
		}
		else {
		position++;
		}
		});
		args.deletedRecords.forEach(function (data) {
		_this.parent.layoutModule.removeCard(data);
		});
		this.parent.layoutModule.refresh();
		}
		this.parent.renderTemplates();
		@@ -325,0 +458,0 @@ this.parent.notify(events.contentReady, {});

56

src/kanban/base/interface.d.ts

		import { BaseEventArgs, Draggable } from '@syncfusion/ej2-base';
		import { Predicate, Query } from '@syncfusion/ej2-data';
		import { Predicate, Query, Deferred } from '@syncfusion/ej2-data';
		import { CurrentAction } from './type';
		@@ -27,2 +27,36 @@ /**
		/**
		* Provides information about virtual scroll information.
		*
		* @interface VirtualScrollInfo
		* @hidden
		*/
		export interface VirtualScrollInfo {
		column?: string \| number;
		columnOverAllHeight?: number;
		columnHeight?: number;
		previousScrollTop?: number;
		currentScrollTop?: number;
		scrollDirection?: string;
		oldBlockIndex?: number[];
		currentBlockIndex?: number[];
		newBlockIndex?: number[];
		offsets?: {
		[x: number]: number;
		};
		tempOffsets?: {
		[x: number]: number;
		};
		page?: number;
		totalColumnData?: number;
		block?: number;
		singleIndexCardCount?: number;
		maxBlock?: number;
		previousTimeStamps?: number;
		}
		/** @hidden */
		export interface FilterStateObj {
		state: DataStateChangeEventArgs;
		deffered: Deferred;
		}
		/**
		* Provides information about a Card Click/Double Click event.
		@@ -170,4 +204,8 @@ *
		}
		/** @private */
		export interface VirtualScrollDataReturnType {
		result: Record<string, any>[];
		}
		/**
		* Custom Sort Compare Function to sort Swimlane rows W
		* Custom Sort Compare Function to sort Swimlane rows.
		*
		@@ -177,7 +215,9 @@ * @interface SortCompareFunction
		export interface SortComparerFunction {
		/** Defines the Swimlane Header Arguments
		* ``` props
		* (param: HeaderArgs[]):- HeaderArgs[];
		* ```
		*/
		/**
		* Defines the Swimlane Header Arguments.
		* ```props
		* (param: HeaderArgs[]):- HeaderArgs[];
		* ```
		*
		*/
		(param: HeaderArgs[]): HeaderArgs[];
		@@ -195,2 +235,4 @@ }
		select?: string[];
		/** Defines the filter dataSource */
		updateData?: Function;
		}
		@@ -197,0 +239,0 @@ export interface PendingState {

36

src/kanban/base/kanban-model.d.ts

		@@ -1,2 +0,2 @@
		import { Component, ModuleDeclaration, NotifyPropertyChanges, Property, Complex, Collection, detach } from '@syncfusion/ej2-base';import { addClass, classList, removeClass, compile, formatUnit, L10n, Browser, Event, EmitType } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';import { Data } from './data';import { SwimlaneSettings } from '../models/swimlane-settings';import { CardSettings } from '../models/card-settings';import { DialogSettings } from '../models/dialog-settings';import { Columns } from '../models/columns';import { StackedHeaders } from '../models/stacked-headers';import { SortSettings } from '../models/sort-settings';import { CardSettingsModel, ColumnsModel, SwimlaneSettingsModel, StackedHeadersModel, DialogSettingsModel } from '../models/index';import { SortSettingsModel } from '../models/index';import { ActionEventArgs, CardClickEventArgs, CardRenderedEventArgs, DragEventArgs, ScrollPosition } from './interface';import { QueryCellInfoEventArgs, DialogEventArgs, DataStateChangeEventArgs, DataSourceChangedEventArgs } from './interface';import { ReturnType, ConstraintType, CurrentAction } from './type';import { Action } from '../actions/action';import { Crud } from '../actions/crud';import { DragAndDrop } from '../actions/drag';import { KanbanDialog } from '../actions/dialog';import { Keyboard } from '../actions/keyboard';import { KanbanTooltip } from '../actions/tooltip';import { KanbanTouch } from '../actions/touch';import { LayoutRender } from './layout-render';import * as events from '../base/constant';import * as cls from './css-constant';
		import { Component, ModuleDeclaration, NotifyPropertyChanges, Property, Complex, Collection, detach } from '@syncfusion/ej2-base';import { addClass, classList, removeClass, compile, formatUnit, L10n, Browser, Event, EmitType } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';import { Data } from './data';import { SwimlaneSettings } from '../models/swimlane-settings';import { CardSettings } from '../models/card-settings';import { DialogSettings } from '../models/dialog-settings';import { Columns } from '../models/columns';import { StackedHeaders } from '../models/stacked-headers';import { SortSettings } from '../models/sort-settings';import { CardSettingsModel, ColumnsModel, SwimlaneSettingsModel, StackedHeadersModel, DialogSettingsModel } from '../models/index';import { SortSettingsModel } from '../models/index';import { ActionEventArgs, CardClickEventArgs, CardRenderedEventArgs, DragEventArgs, ScrollPosition } from './interface';import { QueryCellInfoEventArgs, DialogEventArgs, DataStateChangeEventArgs, DataSourceChangedEventArgs } from './interface';import { ReturnType, ConstraintType, CurrentAction } from './type';import { Action } from '../actions/action';import { Crud } from '../actions/crud';import { DragAndDrop } from '../actions/drag';import { KanbanDialog } from '../actions/dialog';import { Keyboard } from '../actions/keyboard';import { KanbanTooltip } from '../actions/tooltip';import { KanbanTouch } from '../actions/touch';import { LayoutRender } from './layout-render';import { VirtualLayoutRender } from './virtual-layout-render';import * as events from '../base/constant';import * as cls from './css-constant';
		import {ComponentModel} from '@syncfusion/ej2-base';
		@@ -18,3 +18,3 @@
		/**
		* Sets the `width` of the Kanban component, accepting both string and number values.
		* Sets the `width` of the Kanban board, accepting both string and number values.
		* The string value can be either pixel or percentage format.
		@@ -28,3 +28,3 @@ * When set to `auto`, the Kanban width gets auto-adjusted and display its content related to the viewable screen size.
		/**
		* Sets the `height` of the Kanban component, accepting both string and number values.
		* Sets the `height` of the Kanban board, accepting both string and number values.
		* The string type includes either pixel or percentage values.
		@@ -39,2 +39,23 @@ * When `height` is set with specific pixel value, then the Kanban will be rendered to that specified space.
		/**
		* Sets the `height` of the each card in the kanban.
		* The string type includes pixel.
		* When `height` is set with specific pixel value, then the card will be rendered to that specified height.
		* In case, if `auto` value is set, then the height of the card gets auto-adjusted based on the content.
		*
		* @default 'auto'
		*/
		cardHeight?: string;

		/**
		* When the enableVirtualization property is set to true in a Kanban,
		* it will only render the cards that are currently visible within the viewport,
		* and will load additional cards as the user scrolls vertically through the Kanban.
		* This can be helpful for improving the performance of the Kanban when working with large datasets,
		* as it reduces the number of elements that need to be rendered and managed by the browser at any given time.
		*
		* @default false
		*/
		enableVirtualization?: boolean;

		/**
		* With this property, the card data will be bound to Kanban.
		@@ -77,3 +98,3 @@ * The card data can be passed either as an array of JavaScript objects,
		/**
		* Defines the ID of drop component on which drop should occur.
		* Defines the ID of drop Kanban on which drop should occur.
		*
		@@ -165,3 +186,3 @@ * @default []
		/**
		* Enables or disables the persisting component's state between page reloads.
		* Enables or disables the persisting Kanban board's state between page reloads.
		* If enabled, columns, dataSource properties will be persisted in kanban.
		@@ -177,4 +198,5 @@ *
		* @default null
		* @aspType string
		*/
		tooltipTemplate?: string;
		tooltipTemplate?: string \| Function;

		@@ -203,3 +225,3 @@ /**
		/**
		* Triggers after the kanban component is created.
		* Triggers after the kanban board is created.
		*
		@@ -206,0 +228,0 @@ * @event 'created'

49

src/kanban/base/kanban.d.ts

		@@ -19,5 +19,6 @@ import { Component, ModuleDeclaration } from '@syncfusion/ej2-base';
		import { LayoutRender } from './layout-render';
		import { VirtualLayoutRender } from './virtual-layout-render';
		/**
		* The Kanban component is an efficient way to visually depict various stages of a process using cards with transparent workflows.
		* The component has rich set of APIs, methods, and events used to enable or disable its features and customize them.
		* The Kanban board is an efficient way to visually depict various stages of a process using cards with transparent workflows.
		* The Kanban board has rich set of APIs, methods, and events used to enable or disable its features and customize them.
		* ```html
		@@ -38,2 +39,3 @@ * <div id="kanban"></div>
		layoutModule: LayoutRender;
		virtualLayoutModule: VirtualLayoutRender;
		actionModule: Action;
		@@ -53,2 +55,5 @@ dragAndDropModule: DragAndDrop;
		isExternalKanbanDrop: boolean;
		columnDataCount: {
		[key: string]: number;
		};
		/**
		@@ -62,3 +67,3 @@ * It is used to customize the Kanban, which accepts custom CSS class names that defines specific user-defined
		/**
		* Sets the `width` of the Kanban component, accepting both string and number values.
		* Sets the `width` of the Kanban board, accepting both string and number values.
		* The string value can be either pixel or percentage format.
		@@ -71,3 +76,3 @@ * When set to `auto`, the Kanban width gets auto-adjusted and display its content related to the viewable screen size.
		/**
		* Sets the `height` of the Kanban component, accepting both string and number values.
		* Sets the `height` of the Kanban board, accepting both string and number values.
		* The string type includes either pixel or percentage values.
		@@ -81,2 +86,21 @@ * When `height` is set with specific pixel value, then the Kanban will be rendered to that specified space.
		/**
		* Sets the `height` of the each card in the kanban.
		* The string type includes pixel.
		* When `height` is set with specific pixel value, then the card will be rendered to that specified height.
		* In case, if `auto` value is set, then the height of the card gets auto-adjusted based on the content.
		*
		* @default 'auto'
		*/
		cardHeight: string;
		/**
		* When the enableVirtualization property is set to true in a Kanban,
		* it will only render the cards that are currently visible within the viewport,
		* and will load additional cards as the user scrolls vertically through the Kanban.
		* This can be helpful for improving the performance of the Kanban when working with large datasets,
		* as it reduces the number of elements that need to be rendered and managed by the browser at any given time.
		*
		* @default false
		*/
		enableVirtualization: boolean;
		/**
		* With this property, the card data will be bound to Kanban.
		@@ -115,3 +139,3 @@ * The card data can be passed either as an array of JavaScript objects,
		/**
		* Defines the ID of drop component on which drop should occur.
		* Defines the ID of drop Kanban on which drop should occur.
		*
		@@ -191,3 +215,3 @@ * @default []
		/**
		* Enables or disables the persisting component's state between page reloads.
		* Enables or disables the persisting Kanban board's state between page reloads.
		* If enabled, columns, dataSource properties will be persisted in kanban.
		@@ -202,4 +226,5 @@ *
		* @default null
		* @aspType string
		*/
		tooltipTemplate: string;
		tooltipTemplate: string \| Function;
		/**
		@@ -224,3 +249,3 @@ * Triggers on beginning of every Kanban action.
		/**
		* Triggers after the kanban component is created.
		* Triggers after the kanban board is created.
		*
		@@ -315,4 +340,4 @@ * @event 'created'
		*
		* @param {KanbanModel} options Accepts the kanban properties to render the component.
		* @param {string \| HTMLElement} element Accepts the DOM element reference as either selector or element to render the component.
		* @param {KanbanModel} options Accepts the kanban properties to render the Kanban board.
		* @param {string \| HTMLElement} element Accepts the DOM element reference as either selector or element to render the Kanban Board.
		*/
		@@ -342,3 +367,3 @@ constructor(options?: KanbanModel, element?: string \| HTMLElement);
		/**
		* Core method to return the component name.
		* Core method to return the module name.
		*
		@@ -371,3 +396,3 @@ * @returns {string} Returns the module name.
		private destroyModules;
		templateParser(template: string): any;
		templateParser(template: string \| Function): any;
		/**
		@@ -374,0 +399,0 @@ * Returns the card details based on card ID from the board.

83

src/kanban/base/kanban.js

		@@ -39,7 +39,8 @@ var __extends = (this && this.__extends) \|\| (function () {
		import { LayoutRender } from './layout-render';
		import { VirtualLayoutRender } from './virtual-layout-render';
		import * as events from '../base/constant';
		import * as cls from './css-constant';
		/**
		* The Kanban component is an efficient way to visually depict various stages of a process using cards with transparent workflows.
		* The component has rich set of APIs, methods, and events used to enable or disable its features and customize them.
		* The Kanban board is an efficient way to visually depict various stages of a process using cards with transparent workflows.
		* The Kanban board has rich set of APIs, methods, and events used to enable or disable its features and customize them.
		* ```html
		@@ -60,7 +61,8 @@ * <div id="kanban"></div>
		*
		* @param {KanbanModel} options Accepts the kanban properties to render the component.
		* @param {string \| HTMLElement} element Accepts the DOM element reference as either selector or element to render the component.
		* @param {KanbanModel} options Accepts the kanban properties to render the Kanban board.
		* @param {string \| HTMLElement} element Accepts the DOM element reference as either selector or element to render the Kanban Board.
		*/
		function Kanban(options, element) {
		var _this = _super.call(this, options, element) \|\| this;
		_this.columnDataCount = {};
		_this.needsID = true;
		@@ -129,3 +131,3 @@ return _this;
		/**
		* Core method to return the component name.
		* Core method to return the module name.
		*
		@@ -223,6 +225,16 @@ * @returns {string} Returns the module name.
		if (newProp.allowDragAndDrop) {
		this.layoutModule.wireDragEvent();
		if (this.enableVirtualization) {
		this.virtualLayoutModule.wireDragEvent();
		}
		else {
		this.layoutModule.wireDragEvent();
		}
		}
		else {
		this.layoutModule.unWireDragEvent();
		if (this.enableVirtualization) {
		this.virtualLayoutModule.unWireDragEvent();
		}
		else {
		this.layoutModule.unWireDragEvent();
		}
		}
		@@ -237,3 +249,8 @@ break;
		this.tooltipModule = new KanbanTooltip(this);
		this.layoutModule.refreshCards();
		if (this.enableVirtualization) {
		this.virtualLayoutModule.refreshCards();
		}
		else {
		this.layoutModule.refreshCards();
		}
		}
		@@ -256,3 +273,8 @@ break;
		case 'stackedHeaders':
		this.layoutModule.refreshHeaders();
		if (this.enableVirtualization) {
		this.virtualLayoutModule.refreshHeaders();
		}
		else {
		this.layoutModule.refreshHeaders();
		}
		break;
		@@ -301,3 +323,8 @@ case 'sortSettings':
		case 'footerCssField':
		this.layoutModule.refreshCards();
		if (this.enableVirtualization) {
		this.virtualLayoutModule.refreshCards();
		}
		else {
		this.layoutModule.refreshCards();
		}
		break;
		@@ -308,3 +335,8 @@ case 'selectionType':
		removeClass(cards, cls.CARD_SELECTION_CLASS);
		this.layoutModule.disableAttributeSelection(cards);
		if (this.enableVirtualization) {
		this.virtualLayoutModule.disableAttributeSelection(cards);
		}
		else {
		this.layoutModule.disableAttributeSelection(cards);
		}
		}
		@@ -317,3 +349,8 @@ break;
		this.dataModule = new Data(this);
		this.layoutModule = new LayoutRender(this);
		if (this.enableVirtualization) {
		this.virtualLayoutModule = new VirtualLayoutRender(this);
		}
		else {
		this.layoutModule = new LayoutRender(this);
		}
		if (this.allowKeyboard) {
		@@ -356,2 +393,10 @@ this.keyboardModule = new Keyboard(this);
		}
		if (this.tooltipModule) {
		this.tooltipModule.destroy();
		this.tooltipModule = null;
		}
		if (this.virtualLayoutModule) {
		this.virtualLayoutModule.destroy();
		this.virtualLayoutModule = null;
		}
		this.dialogModule = null;
		@@ -366,3 +411,6 @@ this.actionModule = null;
		try {
		if (document.querySelectorAll(template).length) {
		if (typeof template === 'function') {
		return compile(template);
		}
		else if (document.querySelectorAll(template).length) {
		return compile(document.querySelector(template).innerHTML.trim());
		@@ -405,2 +453,5 @@ }
		Kanban.prototype.getColumnData = function (columnKey, dataSource) {
		if (this.enableVirtualization) {
		return this.virtualLayoutModule.getColumnCards(dataSource)["" + columnKey] \|\| [];
		}
		return this.layoutModule.getColumnCards(dataSource)["" + columnKey] \|\| [];
		@@ -591,2 +642,8 @@ };
		__decorate([
		Property('auto')
		], Kanban.prototype, "cardHeight", void 0);
		__decorate([
		Property()
		], Kanban.prototype, "enableVirtualization", void 0);
		__decorate([
		Property([])
		@@ -593,0 +650,0 @@ ], Kanban.prototype, "dataSource", void 0);

25

src/kanban/base/layout-render.js

		@@ -15,3 +15,3 @@ var __extends = (this && this.__extends) \|\| (function () {
		/* eslint-disable @typescript-eslint/no-explicit-any */
		import { append, createElement, formatUnit, EventHandler, addClass, remove, extend, Browser, isNullOrUndefined, removeClass, closest, setStyleAttribute } from '@syncfusion/ej2-base';
		import { append, createElement, formatUnit, EventHandler, addClass, remove, extend, Browser, isNullOrUndefined as isNoU, removeClass, closest, setStyleAttribute } from '@syncfusion/ej2-base';
		import { MobileLayout } from './mobile-layout';
		@@ -313,3 +313,3 @@ import * as events from '../base/constant';
		}
		if (!columnTransition && isNullOrUndefined(_this.parent.swimlaneSettings.keyField)) {
		if (!columnTransition && isNoU(_this.parent.swimlaneSettings.keyField)) {
		var borderElem = createElement('div', { className: cls.BORDER_CLASS });
		@@ -368,2 +368,5 @@ columnWrapper.appendChild(borderElem);
		});
		if (this.parent.cardHeight !== 'auto') {
		cardElement.style.height = formatUnit(this.parent.cardHeight);
		}
		if (this.parent.cardSettings.template) {
		@@ -454,3 +457,3 @@ addClass([cardElement], cls.TEMPLATE_CLASS);
		if (!_this.parent.swimlaneSettings.showEmptyRow) {
		if ((isNullOrUndefined(obj[_this.parent.keyField])) \|\| (obj[_this.parent.keyField] === '') \|\|
		if ((isNoU(obj[_this.parent.keyField])) \|\| (obj[_this.parent.keyField] === '') \|\|
		(obj[_this.parent.keyField] && _this.columnKeys.indexOf(obj[_this.parent.keyField].toString()) === -1)) {
		@@ -582,3 +585,3 @@ return;
		this.parent.scrollPosition.content = { left: target.scrollLeft, top: target.scrollTop };
		if (!isNullOrUndefined(this.parent.swimlaneSettings.keyField) && this.parent.swimlaneSettings.enableFrozenRows) {
		if (!isNoU(this.parent.swimlaneSettings.keyField) && this.parent.swimlaneSettings.enableFrozenRows) {
		this.frozenRows(e);
		@@ -589,3 +592,3 @@ }
		var frozenKey = currentElem.getAttribute('data-key');
		if (!isNullOrUndefined(frozenKey)) {
		if (!isNoU(frozenKey)) {
		this.frozenSwimlaneRow.setAttribute('data-key', frozenKey);
		@@ -598,3 +601,3 @@ }
		var content = this.parent.element.querySelector('.' + cls.CONTENT_CLASS);
		if (isNullOrUndefined(this.frozenSwimlaneRow)) {
		if (isNoU(this.frozenSwimlaneRow)) {
		this.frozenSwimlaneRow = createElement('div', { className: cls.FROZEN_SWIMLANE_ROW_CLASS });
		@@ -883,3 +886,3 @@ var frozenRow = createElement('div', { className: cls.FROZEN_ROW_CLASS });
		return swimlaneData[row.keyField] = _this.parent.kanbanData.filter(function (obj) {
		return !isNullOrUndefined(obj[_this.parent.keyField]) &&
		return !isNoU(obj[_this.parent.keyField]) &&
		_this.columnKeys.indexOf(obj[_this.parent.keyField].toString()) > -1 &&
		@@ -1012,3 +1015,3 @@ ((!obj[_this.parent.swimlaneSettings.keyField] && _this.parent.swimlaneSettings.showUnassignedRow) ?
		}
		if (isNullOrUndefined(this.parent.swimlaneSettings.keyField)) {
		if (isNoU(this.parent.swimlaneSettings.keyField)) {
		index = this.getColumnData(key, this.parent.kanbanData).findIndex(function (colData) {
		@@ -1044,3 +1047,3 @@ return colData["" + field_1] === data["" + field_1];
		if (!cardArgs.cancel) {
		if (isNullOrUndefined(index) \|\| cardWrapper_2.children.length === 0) {
		if (isNoU(index) \|\| cardWrapper_2.children.length === 0) {
		cardWrapper_2.appendChild(cardElement_1);
		@@ -1100,3 +1103,5 @@ }
		var cardWrapper = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CARD_WRAPPER_CLASS));
		cardWrapper.forEach(function (wrapper) { EventHandler.remove(wrapper, 'scroll', _this.onColumnScroll); });
		if (cardWrapper.length > 0) {
		cardWrapper.forEach(function (wrapper) { EventHandler.remove(wrapper, 'scroll', _this.onColumnScroll); });
		}
		if (this.parent.isAdaptive) {
		@@ -1103,0 +1108,0 @@ this.parent.touchModule.unWireTouchEvents();

4

src/kanban/base/mobile-layout.js

		@@ -37,2 +37,4 @@ import { append, createElement, EventHandler, addClass, removeClass } from '@syncfusion/ej2-base';
		treeWrapper.appendChild(swimlaneTree);
		var dataSource = this.parent.enableVirtualization ?
		this.parent.virtualLayoutModule.kanbanRows : this.parent.layoutModule.kanbanRows;
		this.treeViewObj = new TreeView({
		@@ -42,3 +44,3 @@ cssClass: this.parent.cssClass,
		fields: {
		dataSource: this.parent.layoutModule.kanbanRows,
		dataSource: dataSource,
		id: 'keyField',
		@@ -45,0 +47,0 @@ text: 'textField'

3

src/kanban/models/card-settings-model.d.ts

		@@ -54,4 +54,5 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { SelectionType } from '../base/type';
		* @default null
		* @aspType string
		*/
		template?: string;
		template?: string \| Function;

		@@ -58,0 +59,0 @@ /**

3

src/kanban/models/card-settings.d.ts

		@@ -47,4 +47,5 @@ import { ChildProperty } from '@syncfusion/ej2-base';
		* @default null
		* @aspType string
		*/
		template: string;
		template: string \| Function;
		/**
		@@ -51,0 +52,0 @@ * It defines the card selection type, which accepts either of the following values.

3

src/kanban/models/columns-model.d.ts

		@@ -28,4 +28,5 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';
		* @default null
		* @aspType string
		*/
		template?: string;
		template?: string \| Function;

		@@ -32,0 +33,0 @@ /**

3

src/kanban/models/columns.d.ts

		@@ -23,4 +23,5 @@ import { ChildProperty } from '@syncfusion/ej2-base';
		* @default null
		* @aspType string
		*/
		template: string;
		template: string \| Function;
		/**
		@@ -27,0 +28,0 @@ * Enable or disable toggle column

5

src/kanban/models/dialog-settings-model.d.ts

		@@ -12,4 +12,5 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { DialogFieldsModel } from './dialog-fields-model';import { KanbanDialogModel } from './kanban-dialog-model';
		* @default null
		* @aspType string
		*/
		template?: string;
		template?: string \| Function;

		@@ -24,3 +25,3 @@ /**
		/**
		* Customize the model object configuration for the edit or add Dialog component.
		* Customize the model object configuration for the edit or add Dialog of Kanban.
		*
		@@ -27,0 +28,0 @@ * @default null

5

src/kanban/models/dialog-settings.d.ts

		@@ -12,4 +12,5 @@ import { ChildProperty } from '@syncfusion/ej2-base';
		* @default null
		* @aspType string
		*/
		template: string;
		template: string \| Function;
		/**
		@@ -22,3 +23,3 @@ * Defines the dialog fields
		/**
		* Customize the model object configuration for the edit or add Dialog component.
		* Customize the model object configuration for the edit or add Dialog of Kanban.
		*
		@@ -25,0 +26,0 @@ * @default null

16

src/kanban/models/kanban-dialog-model.d.ts

		@@ -9,3 +9,3 @@ import { Property, Complex, ChildProperty } from '@syncfusion/ej2-base';import { AnimationSettings, AnimationSettingsModel, PositionData, PositionDataModel } from '@syncfusion/ej2-popups';
		/**
		* Specifies the value whether the dialog component can be dragged by the end-user.
		* Specifies the value whether the Kanban's dialog can be dragged by the end-user.
		* The dialog allows to drag by selecting the header and dragging it for re-position the dialog.
		@@ -18,3 +18,3 @@ *
		/**
		* Specifies the animation settings of the dialog component.
		* Specifies the animation settings of the Kanban'ss dialog.
		* The animation effect can be applied on open and close the dialog with duration and delay.
		@@ -43,4 +43,4 @@ *
		/**
		* Specifies the value whether the dialog component can be resized by the end-user.
		* If enableResize is true, the dialog component creates grip to resize it diagonal direction.
		* Specifies the value whether the Kanban's dialog can be resized by the end-user.
		* If enableResize is true, the Kanban's dialog creates grip to resize it diagonal direction.
		*
		@@ -52,3 +52,3 @@ * @default false
		/**
		* Specifies the height of the dialog component.
		* Specifies the height of the Kanban's dialog.
		*
		@@ -70,3 +70,3 @@ * @default 'auto'
		/**
		* Specify the min-height of the dialog component.
		* Specify the min-height of the Kanban's dialog.
		*
		@@ -88,3 +88,3 @@ * @default ''
		/**
		* Specifies the value that represents whether the close icon is shown in the dialog component.
		* Specifies the value that represents whether the close icon is shown in the Kanban's dialog.
		*
		@@ -111,3 +111,3 @@ * @default true
		/**
		* Specifies the z-order for rendering that determines whether the dialog is displayed in front or behind of another component.
		* Specifies the z-order for rendering that determines whether the dialog is displayed in front or behind of another Kanban's dialog.
		*
		@@ -114,0 +114,0 @@ * @default 1000

16

src/kanban/models/kanban-dialog.d.ts

		@@ -8,3 +8,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
		/**
		* Specifies the value whether the dialog component can be dragged by the end-user.
		* Specifies the value whether the Kanban's dialog can be dragged by the end-user.
		* The dialog allows to drag by selecting the header and dragging it for re-position the dialog.
		@@ -16,3 +16,3 @@ *
		/**
		* Specifies the animation settings of the dialog component.
		* Specifies the animation settings of the Kanban'ss dialog.
		* The animation effect can be applied on open and close the dialog with duration and delay.
		@@ -38,4 +38,4 @@ *
		/**
		* Specifies the value whether the dialog component can be resized by the end-user.
		* If enableResize is true, the dialog component creates grip to resize it diagonal direction.
		* Specifies the value whether the Kanban's dialog can be resized by the end-user.
		* If enableResize is true, the Kanban's dialog creates grip to resize it diagonal direction.
		*
		@@ -46,3 +46,3 @@ * @default false
		/**
		* Specifies the height of the dialog component.
		* Specifies the height of the Kanban's dialog.
		*
		@@ -62,3 +62,3 @@ * @default 'auto'
		/**
		* Specify the min-height of the dialog component.
		* Specify the min-height of the Kanban's dialog.
		*
		@@ -78,3 +78,3 @@ * @default ''
		/**
		* Specifies the value that represents whether the close icon is shown in the dialog component.
		* Specifies the value that represents whether the close icon is shown in the Kanban's dialog.
		*
		@@ -98,3 +98,3 @@ * @default true
		/**
		* Specifies the z-order for rendering that determines whether the dialog is displayed in front or behind of another component.
		* Specifies the z-order for rendering that determines whether the dialog is displayed in front or behind of another Kanban's dialog.
		*
		@@ -101,0 +101,0 @@ * @default 1000

3

src/kanban/models/swimlane-settings-model.d.ts

		@@ -47,4 +47,5 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { SortComparerFunction } from '../base/interface';import { SortDirection } from '../base/type';
		* @default null
		* @aspType string
		*/
		template?: string;
		template?: string \| Function;

		@@ -51,0 +52,0 @@ /**

3

src/kanban/models/swimlane-settings.d.ts

		@@ -42,4 +42,5 @@ import { ChildProperty } from '@syncfusion/ej2-base';
		* @default null
		* @aspType string
		*/
		template: string;
		template: string \| Function;
		/**
		@@ -46,0 +47,0 @@ * Sort the swimlane resources. The possible values are:

dist/ej2-kanban.min.js

Sorry, the diff of this file is too big to display

dist/ej2-kanban.umd.min.js

Sorry, the diff of this file is too big to display

dist/ej2-kanban.umd.min.js.map