@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

package/lib/tr-grid-checkbox/es6/Checkbox.js

@@ -0,0 +1,1704 @@
+import {Ext} from '../../tr-grid-util/es6/Ext.js';
+import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
+import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
+import {injectCss, prettifyCss} from "../../tr-grid-util/es6/Util.js";
+
+/** @typedef {Object} CheckboxPlugin~Options
+* @description Available options describing `checkbox` object specified in grid's option
+* @property {boolean=} rowSelection=false If enabled, grid row will be selected as checkbox is checked.
+* @property {string=} field="CHECK_BOX" Field that will be used for storing check state
+* @property {string=} disablingField="CHECK_BOX_DISABLED" Field that will be used for storing disabling state
+* @property {Function=} checkboxCreated=null Function handler for checkboxCreated event
+* @property {Function=} checkboxBinding=null Function handler for checkboxBinding event
+* @property {Function=} clicked=null Function handler for checkbox clicked event
+* @property {number=} width=34 Width for checkbox column
+* @property {boolean=} topCheckboxHandler=true If disabled, when clicked on header row checkbox it will not perform default behavior
+*/
+
+/** @typedef {Object} CheckboxPlugin~ColumnOptions
+* @property {boolean=} checkboxColumn=false If enabled, the correspondence column will use as checkbox column.
+*/
+
+/** @event CheckboxPlugin#checkboxCreated
+* @description Fired on each creation of checkbox element
+* @property {Element} input Checkbox element that is an alias to `checkbox`
+* @property {Element} checkbox Checkbox element
+* @property {Object} cell Grid Cell object
+* @property {Object} section Grid ILayoutGrid object
+* @property {Object} grid Core Grid object
+* @property {number} colIndex
+* @property {number} rowIndex
+*/
+
+/** @event CheckboxPlugin#checkboxBinding
+* @description Fired on each rendering of checkbox element
+* @property {Element} checkbox Checkbox element
+* @property {Object} rowData
+* @property {number} rowIndex
+*/
+
+/** @event CheckboxPlugin#clicked
+* @property {Element} checkbox element
+* @property {number} rowIndex
+* @property {boolean} checked
+* @property {string} checkState
+*/
+
+
+/** @constructor
+* @extends {GridPlugin}
+* @param {CheckboxPlugin~Options=} options
+*/
+let CheckboxPlugin = function (options) {
+	let t = this;
+	t._onPreSectionRender = t._onPreSectionRender.bind(t);
+	t._onPostSectionDataBinding = t._onPostSectionDataBinding.bind(t);
+	t._onCheckboxClicked = t._onCheckboxClicked.bind(t);
+	t._onCheckboxKeydown = t._onCheckboxKeydown.bind(t);
+	t._onCheckboxMousedown = t._onCheckboxMousedown.bind(t);
+	t._onColumnIndexChanged = t._onColumnIndexChanged.bind(t);
+	t._onColumnAdded = t._onColumnAdded.bind(t);
+	t._requestUIPopulation = t._requestUIPopulation.bind(t);
+	t._populateUIs = t._populateUIs.bind(t);
+	t._isCheckboxDisabled = t._isCheckboxDisabled.bind(t);
+	t.selectAll = t.selectAll.bind(t);
+	t.deselectAll = t.deselectAll.bind(t);
+	t._hosts = [];
+
+	if(options) {
+		t.config({"checkbox": options});
+	}
+};
+Ext.inherits(CheckboxPlugin, GridPlugin);
+
+/** @type {Function}
+* @private
+*/
+CheckboxPlugin._emptyFunc = function () { };
+/** @private
+* @function
+* @param {Object} view DataView object
+* @param {string} rid
+* @return {boolean}
+*/
+CheckboxPlugin._isRowExpansion = function (view, rid) {
+	return view.isRowExpansion(rid); // WARNING: isRowExpansion() is available only in DataView and not DataTable
+};
+/** @private
+* @function
+* @param {Object} view DataView object
+* @param {Function} disablingGetter
+* @param {string} rid
+* @return {boolean}
+*/
+CheckboxPlugin._checkableRow = function (view, disablingGetter, rid) {
+	if(disablingGetter(view, rid)) {
+		return false;
+	}
+	if(CheckboxPlugin._isRowExpansion(view, rid)) {
+		return false;
+	}
+	return true;
+};
+/** @private
+* @function
+* @param {Element} elem
+*/
+CheckboxPlugin._addDisabledProp = function (elem) {
+	elem.setAttribute("disabled", "");
+};
+/** @private
+* @function
+* @param {Element} elem
+*/
+CheckboxPlugin._removeDisabledProp = function (elem) {
+	elem.removeAttribute("disabled");
+};
+/** @private
+* @function
+* @param {Element} elem
+* @param {string} prop
+* @param {boolean} bool
+*/
+CheckboxPlugin._setBooleanProp = function (elem, prop, bool) {
+	if(bool) {
+		elem.setAttribute(prop, "");
+	} else {
+		elem.removeAttribute(prop);
+	}
+};
+/** Collect member row that is in the given view and all members in collapsed group.
+* @private
+* @param {Object} dv DataView object
+* @param {!Array.<string>} rids
+* @param {string} rid
+* @return {!Array.<string>} rids
+*/
+CheckboxPlugin._collectRowMemberId = function (dv, rids, rid) {
+	if(rid) {
+		let subGroup = dv.getGroupByRowId(rid);
+		if(subGroup) {
+			if(subGroup.isCollapsed()) {
+				return rids.concat(subGroup.getAllRowIds(true));
+			}
+		} else {
+			rids.push(rid);
+		}
+	}
+	return rids;
+};
+
+
+/** @type {number}
+* @private
+*/
+CheckboxPlugin.prototype._width = 34;
+/** @type {number}
+* @private
+*/
+CheckboxPlugin.prototype._displayColumn = -1;
+/** @type {number}
+* @private
+*/
+CheckboxPlugin.prototype._userCheckboxIdx = -1;
+/** @type {number}
+* @private
+*/
+CheckboxPlugin.prototype._updateTimer = 0;
+/** @type {boolean}
+* @private
+*/
+CheckboxPlugin.prototype._initializing = false;
+/** @type {number}
+* @private
+*/
+CheckboxPlugin.prototype._coralCheckboxVer = -1; // Contains version number of the coral checkbox, -1 means not initialize yet
+/** @type {string}
+* @private
+*/
+CheckboxPlugin.prototype._checkboxField = "CHECK_BOX";
+/** @type {string}
+* @private
+*/
+CheckboxPlugin.prototype._disablingField = "CHECK_BOX_DISABLED";
+/** @type {boolean}
+* @private
+*/
+CheckboxPlugin.prototype._autoRowSelection = false;
+/** @type {boolean}
+* @private
+*/
+CheckboxPlugin.prototype._topCheckboxHandler = true;
+/** @type {string}
+* @private
+*/
+CheckboxPlugin.prototype._anchorRowId = "";
+
+
+/** @type {Object.<string, number>}
+* @private
+*/
+CheckboxPlugin._exceptions = {
+	"filterInputs": 1,
+	"bottomPadding": 1
+};
+/** @type {string}
+* @private
+*/
+CheckboxPlugin._styles = prettifyCss([
+	".tr-checkbox-column input[type='checkbox'], .tr-checkbox-column input+label", [
+		"cursor: pointer;"
+	],
+	".column.tr-checkbox-column.tr-align-left .cell", [
+		"text-align: left;"
+	],
+	".column.tr-checkbox-column.tr-align-right .cell", [
+		"text-align: right;"
+	]
+]);
+/** @private
+* @param {Object} grid core grid object
+*/
+CheckboxPlugin._applyStyles = function(grid) {
+	if(grid && !grid._checkboxStyles) { // TODO: Support run-time theme loading
+		grid._checkboxStyles = true; // Prevent loading the same style twice
+		injectCss(CheckboxPlugin._styles, grid.getElement());
+	}
+};
+
+/** @type {number}
+* @private
+*/
+CheckboxPlugin._runningId = 0;
+
+/** @private
+* @function
+* @param {*} val
+* @return {string}
+*/
+CheckboxPlugin._toCheckState = function (val) {
+	if(val === "partial") {
+		return "partial";
+	} else {
+		return (val) ? "checked" : "unchecked";
+	}
+};
+/** @private
+* @function
+* @param {Element} chkbox
+* @return {string}
+*/
+CheckboxPlugin._getCheckState = function (chkbox) {
+	if(chkbox.style.display == "none" || chkbox.hasAttribute("disabled")) { // slow
+		return "";
+	}
+	// WORKAROUND
+	// in elf v3, v4 chkbox.indeterminate can represent 'partial' state
+	// but we check class 'square-shape' instead to support elf v1 and native checkbox input
+	else if(chkbox.classList.contains('square-shape')) {
+		return "partial";
+	} else if(chkbox.checked) {
+		return "checked";
+	} else {
+		return "unchecked";
+	}
+};
+/** @private
+* @function
+* @param {Element} chkbox
+* @param {string} state
+* @return {number} Return non-zero value if there is a state change
+*/
+CheckboxPlugin._setCheckState = function (chkbox, state) {
+	if(chkbox._forceNewState) { // WORKAROUND: to force checkbox move to next state
+		state = chkbox._forceNewState;
+		chkbox._forceNewState = null;
+	} else if(CheckboxPlugin._getCheckState(chkbox) === state) { // Process change only when necessary
+		return 0;
+	}
+
+	if(state === "partial") {
+		chkbox.classList.add("square-shape");
+		// Elf v3 will clear indeterminate state when setting checked property
+		chkbox.checked = (this._coralCheckboxVer < 3); // WARNING: This is not a conventional standard
+		chkbox.setAttribute("indeterminate", "");
+	} else {
+		chkbox.classList.remove("square-shape");
+		chkbox.checked = (state === "checked");
+		chkbox.removeAttribute("indeterminate");
+	}
+	// WORKAROUND: to force detech _prevState of check box
+	chkbox._prevState = state;
+	return 1;
+};
+/** @private
+* @function
+* @param {string} curState checked|unchecked|partial
+* @return {string} Return new state checked|unchecked
+*/
+CheckboxPlugin._toggleState = function (curState) {
+	// WARNING: When clicking indeterminated checkbox, it should result in selecting all (checked)
+	return (curState == "checked" || curState == "partial") ? "unchecked" : "checked";
+};
+/** @private
+* @function
+* @param {string} curState
+* @param {string} state
+* @return {string} checked|unchecked|partial
+*/
+CheckboxPlugin._mergeState = function(curState, state) {
+	if(curState) {
+		if(state) {
+			if(curState !== state) {
+				return "partial";
+			}
+		} else {
+			return curState;
+		}
+	}
+	return state;
+};
+/** @private
+* @function
+* @param {Array.<string>} states
+* @return {string} checked|unchecked|partial
+*/
+CheckboxPlugin._mergeStates = function(states) {
+	let state = "";
+	for(let i = states.length; --i >= 0; ) {
+		state = CheckboxPlugin._mergeState(state, states[i]);
+		if(state === "partial") {
+			return state;
+		}
+	}
+	return state;
+};
+
+/** @public
+* @return {string}
+*/
+CheckboxPlugin.prototype.getName = function () {
+	return "CheckboxPlugin"; // Read Only
+};
+/** @public
+* @param {Object} host core grid object
+* @param {Object=} options
+*/
+CheckboxPlugin.prototype.initialize = function (host, options) {
+	if(this._hosts.indexOf(host) >= 0) { return; }
+	this._hosts.push(host);
+
+	host.listen("preSectionRender", this._onPreSectionRender);
+	host.listen("postSectionDataBinding", this._onPostSectionDataBinding);
+
+	host.listen("columnAdded", this._onColumnIndexChanged);
+	host.listen("columnAdded", this._onColumnAdded);
+	host.listen("columnMoved", this._onColumnIndexChanged);
+	host.listen("columnRemoved", this._onColumnIndexChanged);
+
+	this.config(options);
+	CheckboxPlugin._applyStyles(host);
+
+	this._requestUIPopulation();
+};
+/** @public
+* @param {Object} host core grid object
+*/
+CheckboxPlugin.prototype.unload = function (host) {
+	let at = this._hosts.indexOf(host);
+	if(at < 0) { return; }
+
+	host.unlisten("preSectionRender", this._onPreSectionRender);
+	host.unlisten("postSectionDataBinding", this._onPostSectionDataBinding);
+
+	host.unlisten("columnAdded", this._onColumnIndexChanged);
+	host.unlisten("columnAdded", this._onColumnAdded);
+	host.unlisten("columnMoved", this._onColumnIndexChanged);
+	host.unlisten("columnRemoved", this._onColumnIndexChanged);
+
+	this._hosts.splice(at, 1);
+
+	if(!this._hosts.length) {
+		this._compositeGrid = null;
+		if(this._updateTimer) {
+			clearTimeout(this._updateTimer);
+			this._updateTimer = 0;
+		}
+	}
+};
+/** Remove redundant built-in feature
+* @public
+* @param {string} optionName
+* @param {*} optionVal
+* @return {*} The transformed value of the option
+*/
+CheckboxPlugin.prototype.beforeProcessOption = function (optionName, optionVal) {
+	if(optionName == "checkboxSelector") {
+		return null; // eslint-disable-line
+	}
+	return; // eslint-disable-line
+};
+
+/** @public
+* @param {Object=} options
+*/
+CheckboxPlugin.prototype.config = function (options) {
+	if(!options) { return; }
+
+	let chkboxOpt = /** @type{Object} */(options["checkbox"]);
+	if(!chkboxOpt) {
+		return;
+	}
+
+	let val;
+	val = chkboxOpt["rowSelection"]; // previously named "selectCheckedRow"
+	if(val != null) {
+		this._autoRowSelection = val ? true : false;
+	}
+	val = chkboxOpt["field"];
+	if(val) {
+		this._checkboxField = val;
+	}
+	val = chkboxOpt["disablingField"];
+	if(val) {
+		this._disablingField = val;
+	}
+	val = chkboxOpt["width"];
+	if(val) {
+		this._width = val;
+	}
+	val = chkboxOpt["topCheckboxHandler"];
+	if(val != null) {
+		this._topCheckboxHandler = val ? true : false;
+	}
+
+	this.addListener(chkboxOpt, "checkboxCreated");
+	this.addListener(chkboxOpt, "clicked");
+	this.addListener(chkboxOpt, "checkboxBinding");
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+CheckboxPlugin.prototype.getConfigObject = function (gridOptions) {
+	let obj = gridOptions || {};
+
+	let columns = obj.columns;
+	if(!columns) {
+		columns = obj.columns = [];
+	}
+
+	let len = this.getColumnCount();
+	for(let i = 0; i < len; ++i) {
+		let col = columns[i];
+		if(!col) {
+			col = columns[i] = {};
+		}
+
+		let colOptions = this._getColumnData(i);
+		if(colOptions.isCheckboxColumn || i === this._userCheckboxIdx) {
+			col.checkboxColumn = true;
+		}
+	}
+
+	let extOptions = obj.checkbox;
+	if(!extOptions) {
+		extOptions = obj.checkbox = {};
+	}
+
+	if(this._autoRowSelection) {
+		extOptions.rowSelection = true;
+	}
+
+	if(this._checkboxField !== "CHECK_BOX") {
+		extOptions.field = this._checkboxField;
+	}
+
+	if(this._disablingField !== "CHECK_BOX_DISABLED") {
+		extOptions.disablingField = this._disablingField;
+	}
+
+	if(this._width !== 34) {
+		extOptions.width = this._width;
+	}
+
+	return obj;
+};
+
+/** @public
+ * @ignore
+* @param {Element} elem
+* @param {Object} config
+* @param {boolean} runTime Indicates that this is runtime loading
+*/
+CheckboxPlugin.prototype.beforeInit = function(elem, config, runTime) {
+	if(runTime) {
+		return; // Since this is runTime loading, there is no point of processing config object.
+	}
+	let t = this;
+	t._displayColumn = -1;
+
+	// Add missing fields to avoid shifting of data due to adding of checkbox column
+	let columns = config["columns"];
+	if(config.dataModel) {
+		config.dataModel = t._prepareData(columns, config.dataModel);
+	}
+	if(config.staticDataRows) {
+		config.staticDataRows = t._prepareData(columns, config.staticDataRows);
+	}
+
+	let chbxConfig = config["checkbox"];
+	if(chbxConfig) {
+		// Set checkbox column width here to ensure the column width will not blink during the initialization
+		if(chbxConfig["width"] != null) {
+			t._width = chbxConfig["width"];
+		}
+
+		if(chbxConfig["field"] != null) {
+			t._checkboxField = chbxConfig["field"];
+		}
+	}
+
+	t._userCheckboxIdx = t._findCheckboxColumnIndexFromConfig(columns);
+	if(t._userCheckboxIdx >= 0) {
+		t._genCheckboxColumn(columns[t._userCheckboxIdx]);
+	} else {
+		columns.unshift(t._genCheckboxColumn());
+		t._userCheckboxIdx = 0; // TODO: This _userCheckboxIdx has some misleading meaning
+	}
+};
+
+/** @private
+* @param {Object=} userObj
+* @return {!Object} checkbox column config
+*/
+CheckboxPlugin.prototype._genCheckboxColumn = function (userObj) {
+	let defaultObj = {
+		width: this._width,
+		sortable: false,
+		focusable: true,
+		className: "tr-checkbox-column", // For rt-grid
+		classes: { "tr-checkbox-column": 1 }, // For composite grid
+		noResizing: true, // ColumnResizing Extension
+		resizable: false, // ResizableTitlePlugin
+		title: "",
+		tooltip: "",
+		// headerRenderer: CheckboxPlugin._emptyFunc, // rt-grid support
+		filterInput: { disabled: true },
+		field: this._checkboxField,
+		notRealTimeField: true, // Checkbox column is not a real-time field
+		checkboxColumn: true,
+		binding: CheckboxPlugin._emptyFunc, // rt-grid binding
+		formatter: { // composite-grid binding,
+			renderTitle: CheckboxPlugin._emptyFunc,
+			render: CheckboxPlugin._emptyFunc,
+			bind: CheckboxPlugin._emptyFunc
+		}
+	};
+
+	if(userObj && !userObj.autoGenerated) {
+		if(userObj.field && this._checkboxField === "CHECK_BOX") {
+			this._checkboxField = userObj.field;
+		}
+		if(userObj.width && this._width === 34) {
+			this._width = +userObj.width;
+		}
+
+		for(let key in defaultObj) {
+			let userVal = userObj[key];
+			if(userVal == null) {
+				userObj[key] = defaultObj[key];
+			}
+		}
+		return userObj;
+	}
+
+	defaultObj.autoGenerated = true;
+	return defaultObj;
+};
+
+/** @private
+* @param {Array.<Object>} columns
+* @param {Array.<Object>|Object} dataModel
+* @return {Object} data model
+*/
+CheckboxPlugin.prototype._prepareData = function (columns, dataModel) {
+	let model = dataModel;
+	if(Array.isArray(dataModel)) {
+		model = { data: dataModel };
+	}
+	if(model.data && !model.fields) {
+		// if data is 2D then we should add fields into dataModel
+		if(Array.isArray(model.data[0])) {
+			model.fields = this._getFieldsFromColumns(columns);
+		}
+	}
+
+	return model;
+};
+
+/** @private
+* @param {Array.<Object>} columns
+* @return {Array.<string>} list of fields
+*/
+CheckboxPlugin.prototype._getFieldsFromColumns = function (columns) {
+	let colCount = columns.length;
+	let fields = new Array(colCount);
+	for(let c = 0; c < colCount; c++) {
+		let col = columns[c];
+		if(!col) {
+			fields[c] = "";
+		} else if(typeof col === "string") {
+			fields[c] = col;
+		} else {
+			fields[c] = col.field || "";
+		}
+	}
+	return fields;
+};
+
+/** @private
+ * @param {Array.<Object>} columns
+* @return {number} Return negative number if the column not found
+*/
+CheckboxPlugin.prototype._findCheckboxColumnIndexFromConfig = function (columns) {
+	if(Array.isArray(columns)) {
+		let colCount = columns.length;
+		for(let i = 0; i < colCount; i++) {
+			let col = columns[i];
+			if(col && col.checkboxColumn) {
+				return i;
+			}
+		}
+	}
+	return -1;
+};
+
+/** @public
+* @return {number} Return negative number if the column not found
+*/
+CheckboxPlugin.prototype.getCheckboxColumnIndex = function () {
+	if(this._displayColumn < 0) {
+		let host = this._hosts[0];
+		let colCount = host ? host.getColumnCount() : 0;
+		for(let c = 0; c < colCount; ++c) {
+			let colData = this._getColumnData(c, host);
+			if(colData && colData.isCheckboxColumn) {
+				this._displayColumn = c;
+				break;
+			}
+		}
+	}
+	return this._displayColumn;
+};
+/** @public
+* @function
+* @param {number}
+* @return {number} Return negative number if the column not found
+*/
+CheckboxPlugin.prototype.getDisplayColumn = CheckboxPlugin.prototype.getCheckboxColumnIndex;
+/** @public
+* @param {Object} sectionRef Grid SectionReference object
+* @param {number} rowIndex
+* @return {Element}
+*/
+CheckboxPlugin.prototype.getCheckbox = function (sectionRef, rowIndex) {
+	let host = this._hosts[0];
+	let sectionSettings = host.getSectionSettings(sectionRef);
+	if(sectionSettings) {
+		return this._getCheckbox(sectionSettings, rowIndex);
+	}
+
+	return null;
+};
+
+
+/** @private
+* @param {Object} sectionSettings Grid sectionSettings object
+* @param {number} colIndex
+* @param {number} rowIndex
+* @return {Element}
+*/
+CheckboxPlugin.prototype._createCheckbox = function (sectionSettings, colIndex, rowIndex) {
+	let section = sectionSettings.getSection();
+
+	let cell = section.getCell(colIndex, rowIndex);
+	if(!cell) {
+		return null;
+	}
+	let content = cell.getContent();
+	if(content && content._chkbox) {
+		return content;
+	}
+
+	if(this._coralCheckboxVer === -1) {
+		this._coralCheckboxVer = ElfUtil.hasComponent("ef-checkbox");
+	}
+
+	let chkbox;
+	if(this._coralCheckboxVer) {
+		chkbox = document.createElement("ef-checkbox");
+	} else {
+		chkbox = document.createElement("input");
+		chkbox.setAttribute("type", "checkbox");
+	}
+	chkbox._chkbox = true;
+
+	chkbox.addEventListener("click", this._onCheckboxClicked, false);
+	chkbox.addEventListener("keydown", this._onCheckboxKeydown, false);
+	chkbox.addEventListener("mousedown", this._onCheckboxMousedown, false);
+	// chkbox.addEventListener("checked-changed", this._onCheckboxClicked, false); // Elf v3
+
+	cell.setContent(chkbox);
+	let sectionType = sectionSettings.getType();
+	if(sectionType === "title") {
+		chkbox.setAttribute("aria-label", "all rows");
+	}
+
+	if(!this._coralCheckboxVer) { // Workaround for UIFR theme styling
+		let lbl = document.createElement("label");
+		let id = "tr_grid_checkbox_" + CheckboxPlugin._runningId++;
+		chkbox.setAttribute("id", id);
+		lbl.setAttribute("for", id);
+		chkbox.parentElement.appendChild(lbl); // HACK
+	}
+
+	this._dispatch("checkboxCreated", {
+		"input": chkbox
+		, "checkbox": chkbox
+		, "cell": cell
+		, "colIndex": colIndex
+		, "rowIndex": rowIndex
+		, "grid": this._hosts[0]
+		, "section": section
+		, "sectionType": sectionType
+	});
+
+	return chkbox;
+};
+
+
+/** Select/check all checkboxes that are not affected by filtering and pagination logics. This is equivalent to ticking the checkbox at the top header section of the grid
+* @public
+*/
+CheckboxPlugin.prototype.selectAll = function () {
+	this.checkAll(true);
+};
+/** Deselect/uncheck all checkboxes that are not affected by filtering and pagination logics. This is equivalent to un-ticking the checkbox at the top header section of the grid
+* @public
+* @param {boolean} check
+*/
+CheckboxPlugin.prototype.deselectAll = function () {
+	this.checkAll(false);
+};
+/** Select/check all spicified content checkboxes that are in view
+* @public
+* @param {Array.<number|string>} rowRefs
+* @param {boolean} checked
+*/
+CheckboxPlugin.prototype.selectCheckboxes = function (rowRefs) {
+	this.setCheckStates(rowRefs, true);
+};
+/** Select/check all spicified content checkboxes that are in view
+* @public
+* @param {Array.<number|string>} rowRefs
+* @param {boolean} checked
+*/
+CheckboxPlugin.prototype.deselectCheckboxes = function (rowRefs) {
+	this.setCheckStates(rowRefs, false);
+};
+/** Set check state to all spicified content checkboxes that are in view
+* @public
+* @param {Array.<number|string>} rowRefs
+* @param {boolean} checked
+*/
+CheckboxPlugin.prototype.setCheckStates = function (rowRefs, checked) {
+	if(!rowRefs) {
+		return;
+	}
+	let ary = Array.isArray(rowRefs) ? rowRefs : [rowRefs];
+	let len = ary.length;
+	if(!len) {
+		return;
+	}
+
+	// TODO: Support multi-table mode
+	let host = this._hosts[0];
+	let sectionSettings = host.getSectionSettings("content");
+	let dv = sectionSettings.getDataSource();
+	if(!dv) {
+		return;
+	}
+
+	let rids = [];
+	let i;
+	for(i = 0; i < len; ++i) {
+		let ref = ary[i];
+		let rid = (typeof ref === "string") ? ref : dv.getRowId(ref);
+		rids = CheckboxPlugin._collectRowMemberId(dv, rids, rid);
+	}
+	if(rids.length) {
+		rids = rids.filter(CheckboxPlugin._checkableRow.bind(null, dv, this._isCheckboxDisabled));
+		this._setColumnData(dv, this._checkboxField, checked, rids);
+	}
+};
+
+/** This is equivalent to clicking the checkbox at the top header section of the grid. <br>
+* Use {@link CheckboxPlugin#setAllCheckStates} to set all states regardless of filtering and pagination
+* @public
+* @param {boolean} checked Truthy or Falsy value
+* @see {@link CheckboxPlugin#setAllCheckStates}
+*/
+CheckboxPlugin.prototype.checkAll = function (checked) {
+	let state = CheckboxPlugin._toCheckState(checked != null ? checked : true);
+	let host = this._hosts[0];
+	let titles = host ? host.getAllSectionSettings("title") : null;
+	if(!titles) return;
+
+	let rootSettings;
+	for(let i = 0; i < titles.length; ++i) { // Find the root settings
+		if(titles[i].getChildren()) {
+			rootSettings = titles[i];
+			break;
+		}
+	}
+	if(!rootSettings) { return; }
+
+	this._setSectionState(rootSettings, state);
+	this._setDescendantCheckState(rootSettings, state);
+};
+/** Set state for all checkboxes regardless of filtering and pagination
+* @public
+* @param {boolean} checked Truthy or Falsy value
+* @see {@link CheckboxPlugin#checkAll}
+*/
+CheckboxPlugin.prototype.setAllCheckStates = function (checked) {
+	checked = checked ? true : false;
+	let host = this._hosts[0];
+	let dv = host ? host.getDataSource() : null;
+	let dt = dv ? dv.getDataSource() : null;
+
+	if(dt) {
+		// TODO: Check if we need to omit disabled checkboxes
+		let rids = dt.getAllRowIds(true); // TODO: Check if we can use shallow copy
+		this._setColumnData(dv, this._checkboxField, checked, rids);
+	}
+};
+
+/** Set state for all checkboxes regardless of pagination, state would be apply to all filtered data
+* @public
+* @param {boolean=} checked Truthy or Falsy value
+* @see {@link CheckboxPlugin#checkAll}
+*/
+CheckboxPlugin.prototype.selectAllPages = function (checked) {
+	let host = this._hosts[0];
+	let dv = host ? host.getDataSource() : null;
+	if(!dv) {
+		return;
+	}
+
+	let allRids = dv.getSortedRowIds(true);  // All row ids with filter applied, including disabled and pagination
+	allRids = allRids.filter(CheckboxPlugin._checkableRow.bind(null, dv, this._isCheckboxDisabled));
+
+	let state = checked != null ? checked : true;
+	this._setColumnData(dv, this._checkboxField, state, allRids);
+};
+
+/** @public
+* @param {number|string} rowRef Row id in the data table or row index
+* @param {boolean} disabled Truthy or Falsy value
+*/
+CheckboxPlugin.prototype.disableCheckbox = function(rowRef, disabled) {
+	let host = this._hosts[0];
+	let dv = host ? host.getDataSource() : null;
+	if(!dv) { return; }
+
+	if(typeof rowRef === "string") {
+		// TODO: should allow invisible row
+		rowRef = dv.getRowIndex(rowRef);
+	}
+
+	if(rowRef == null || rowRef < 0) {
+		return;
+	}
+
+	this._setData(dv, rowRef, this._disablingField, disabled !== false);
+};
+/** @private
+* @param {Object} view DataView object
+* @param {string} rowId in the data table or row index
+* @returns {boolean} disabled Truthy or Falsy value
+*/
+CheckboxPlugin.prototype._isCheckboxDisabled = function(view, rowId) {
+	let rowData = this._getRowFromId(view, rowId);
+	if(rowData) {
+		return rowData[this._disablingField] ? true : false;
+	}
+	return false;
+};
+
+/** @public
+* @param {number|string} rowRef Row id in the data table or row index
+*/
+CheckboxPlugin.prototype.enableCheckbox = function(rowRef) {
+	this.disableCheckbox(rowRef, false);
+};
+
+/** WARNING: Index is not reliable when use with row grouping due to dynamic nature of the features (e.g. expanding and collapsing of the group). <br>
+* Please use {@link CheckboxPlugin#getSelectedRowData} instead. <br>
+* Current behavior is to get selected index from un-filtered rows.
+* @public
+* @param {Object} sectionRef Grid SectionReference object
+* @param {string=} state Specifies state for searching. Default is "checked"
+* @return {!Array.<number>} the indices are relative to the specified section
+* @see {@link CheckboxPlugin#getSelectedRowData}
+*/
+CheckboxPlugin.prototype.getAllCheckedIndices = function (sectionRef, state) {
+	let ary = [];
+	let colIndex = this.getCheckboxColumnIndex();
+	let host = colIndex >= 0 ? this._hosts[0] : null;
+	let sectionSettings = host ? host.getSectionSettings(sectionRef) : null;
+
+	if(sectionSettings) {
+		if(state == null) { state = "checked"; }
+		let r, rowCount;
+		if(this._isDataBound(sectionSettings)) {
+			let dv = sectionSettings.getDataSource();
+			let rowIds = dv.getVisibleRowIds(true); // Filter and pagination are applied
+			rowCount = rowIds.length;
+			for(r = 0; r < rowCount; ++r) {
+				let rowData = this._getRowFromId(dv, rowIds[r]);
+				if(rowData) {
+					if(CheckboxPlugin._toCheckState(rowData[this._checkboxField]) === state) {
+						ary.push(r);
+					}
+				}
+			}
+		} else {
+			let section = sectionSettings.getSection();
+			rowCount = section.getRowCount();
+			for(r = 0; r < rowCount; ++r) {
+				let chkbox = this._getCheckbox(section, r);
+				if(CheckboxPlugin._getCheckState(chkbox) === state) {
+					ary.push(r);
+				}
+			}
+		}
+	}
+	return ary;
+};
+
+/** Return selected rows, excluding rows that are filtered or hidden due to pagination.
+* @public
+* @param {string=} field="" When field is not provided, entire rowData is returned. If field is specified, field values will be returned. Use "ROW_ID" as the field for retrieving internal row ids.
+* @return {!Array} Returns selected rows
+*/
+CheckboxPlugin.prototype.getFilteredSelectedData = function (field) {
+	let host = this._hosts[0];
+	return this._getSelectedRowData(host ? host.getDataSource() : null, field);
+};
+
+/** Returns all selected rows, even if the rows are filtered or hidden due to group collapsing or pagination. <br>
+* Note that the results are NOT shown in order of the current appearance (i.e. sorting has no impact).
+* @public
+* @param {string=} field="" When field is not provided, entire rowData is returned. If field is specified, field values will be returned. Use "ROW_ID" as the field for retrieving internal row ids.
+* @return {!Array} Returns selected rows
+* @example
+* chkBoxExtension.getSelectedRowData(); // Get all selected row data in this format [{}, {}, ... RowData objects, {}]
+* chkBoxExtension.getSelectedRowData("field"); // Get all field values from selected row data in this format [value1, value2, ... values, valueN]
+*/
+CheckboxPlugin.prototype.getAllSelectedData = function (field) {
+	let host = this._hosts[0];
+	let dv = host ? host.getDataSource() : null;
+	let dt = dv ? dv.getDataSource() : null; // get All selected Data we use dataTable instead
+	return this._getSelectedRowData(dt, field);
+};
+
+/** Alias of {@link CheckboxPlugin#getAllSelectedData}
+* @public
+* @function
+* @param {string=} field="" When field is not provided, entire rowData is returned. If field is specified, field values will be returned. Use "ROW_ID" as the field for retrieving internal row ids.
+* @return {!Array} Returns selected rows
+*/
+CheckboxPlugin.prototype.getSelectedRowData = CheckboxPlugin.prototype.getAllSelectedData;
+
+/** @private
+* @param {Object} dataSource DataView or DataTable object
+* @return {!Array} Returns selected row ids
+*/
+CheckboxPlugin.prototype._getSelectedRowIds = function (dataSource) {
+	if(!dataSource || this.getCheckboxColumnIndex() < 0) {
+		return [];
+	}
+
+	let rowIds = this._getRowMemberIdsInView(dataSource);
+	let rowCount = rowIds.length;
+	let selRowIds = [];
+	let i, rowId;
+	for(i = 0; i < rowCount; ++i) {
+		rowId = rowIds[i];
+		if(this._getCheckboxValue(dataSource, rowId)) {
+			selRowIds.push(rowId);
+		}
+	}
+	return selRowIds;
+};
+
+/** @private
+* @param {Object} dataSource DataView or DataTable object
+* @param {string=} field="" When field is not provided, entire rowData is returned. If field is specified, field values will be returned. Use "ROW_ID" as the field for retrieving internal row ids.
+* @return {!Array} Returns selected rows
+*/
+CheckboxPlugin.prototype._getSelectedRowData = function (dataSource, field) {
+	let selRowIds = this._getSelectedRowIds(dataSource);
+	let i, rowCount = selRowIds.length;
+	if(field === "ROW_ID" || rowCount === 0) {
+		return selRowIds; // Row Ids
+	} else {
+		let selRows = new Array(rowCount);
+		for(i = 0; i < rowCount; ++i) {
+			selRows[i] = this._getRowFromId(dataSource, selRowIds[i]);
+		}
+		if(field) {
+			let values = new Array(rowCount);
+			for(i = 0; i < rowCount; ++i) {
+				values[i] = selRows[i][field];
+			}
+			return values; // Field values
+		} else {
+			return selRows; // Row objects
+		}
+	}
+};
+
+/** @private
+* @function
+* @param {Object} dv DataView
+* @param {string} rowId
+* @return {boolean} Check State
+*/
+CheckboxPlugin.prototype._getRowFromId = function (dv, rowId) {
+	return this._rowGetter(dv.getRowData(rowId));
+};
+/** @private
+* @param {Object} dv DataView
+* @param {string} rowId
+* @return {boolean} Check State
+*/
+CheckboxPlugin.prototype._getCheckboxValue = function (dv, rowId) {
+	let row = this._getRowFromId(dv, rowId);
+	if(row) {
+		return row[this._checkboxField] ? true : false;
+	}
+	return false;
+};
+/** @private
+* @param {Object} dv DataView
+* @return {string} state
+*/
+CheckboxPlugin.prototype._getGroupState = function (dv) {
+	if(!dv) {
+		return "unchecked";
+	}
+
+	let rowIds = null;
+	if(dv.getGroupLevel && dv.getGroupLevel() === 0) { // Root group
+		rowIds = this._getRowMemberIdsInView(dv);
+	} else { // Subgroup
+		rowIds = dv.getAllRowIds(true); // Getting shallow copy and excluding header rows
+		rowIds = rowIds.filter(CheckboxPlugin._checkableRow.bind(null, dv, this._isCheckboxDisabled));
+	}
+
+	let len = rowIds.length;
+	if(!len) {
+		return "unchecked";
+	}
+
+	let state = "";
+	for(let i = 0; i < len; ++i) {
+		state = CheckboxPlugin._mergeState(
+			state,
+			CheckboxPlugin._toCheckState(this._getCheckboxValue(dv, rowIds[i]))
+		);
+	}
+	return state;
+};
+/** @private
+* @param {Object} dv DataView
+* @return {boolean} state
+*/
+CheckboxPlugin.prototype._getGroupDisabledState = function (dv) {
+	if(!dv) {
+		return false;
+	}
+
+	let rowIds = this._getRowMemberIdsInView(dv);
+	let len = rowIds.length;
+	for(let i = 0; i < len; ++i) {
+		if(!this._isCheckboxDisabled(dv, rowIds[i])) {
+			return false;
+		}
+	}
+	return true;
+};
+/** @private
+* @param {Object} sectionSettings Grid sectionSettings object
+* @return {string}
+*/
+CheckboxPlugin.prototype._getSectionState = function (sectionSettings) {
+	if(this._isDataBound(sectionSettings)) {
+		return this._getGroupState(sectionSettings.getDataSource());
+	} else {
+		let checkboxes = this._getAllCheckboxes(sectionSettings);
+		let states = checkboxes.map(CheckboxPlugin._getCheckState);
+		return CheckboxPlugin._mergeStates(states);
+	}
+};
+/** @private
+* @param {Object} sectionSettings Section or SectionSettings
+* @param {number} rowIndex
+* @return {Element}
+*/
+CheckboxPlugin.prototype._getCheckbox = function (sectionSettings, rowIndex) {
+	let section = sectionSettings.getSection ? sectionSettings.getSection() : sectionSettings;
+	let chkbox = /** @type{Element} */(section.getCellContent(this._displayColumn, rowIndex));
+	if(!chkbox) {
+		return null;
+	} else if(chkbox.tagName === "EF-CHECKBOX") {
+		return chkbox;
+	} else if(chkbox.type === "checkbox") {
+		return chkbox;
+	} else {
+		return null;
+	}
+};
+/** @private
+* @param {Object} sectionSettings Grid sectionSettings object
+* @param {Array.<Element>=} ary
+* @return {!Array.<Element>}
+*/
+CheckboxPlugin.prototype._getAllCheckboxes = function (sectionSettings, ary) {
+	ary = ary || [];
+
+	let section = sectionSettings.getSection();
+	let fi = section.getFirstIndexInView();
+	let li = section.getLastIndexInView();
+	for(let r = fi; r <= li; ++r) { // WARNING: Index could be shifted
+		let chkbox = this._getCheckbox(sectionSettings, r);
+		if(chkbox) { // WARNING: Index is shifted
+			ary.push(chkbox);
+		}
+	}
+	return ary;
+};
+
+/** @private
+* @param {Object} sectionSettings Grid sectionSettings object
+* @param {string} state
+*/
+CheckboxPlugin.prototype._setDescendantCheckState = function (sectionSettings, state) {
+	if(!this._topCheckboxHandler){
+		return;
+	}
+	let children = sectionSettings.getChildren();
+	if(children) {
+		for(let i = 0; i < children.length; ++i) {
+			let child = children[i];
+			this._setSectionState(child, state);
+			this._setDescendantCheckState(child, state);
+		}
+	}
+};
+/** @private
+* @param {Object} sectionSettings Grid sectionSettings object
+* @param {string=} callerState
+* @param {Object=} dv DataView
+*/
+CheckboxPlugin.prototype._syncAscendantState = function (sectionSettings, callerState, dv) {
+	let parent = sectionSettings.getParent();
+	let host = this._hosts[0];
+	if(!host || !parent || !parent.getSection().isVisible()) { return; }
+
+	let i;
+	let state = callerState || "";
+	if(state !== "partial") {
+		if(!callerState) {
+			sectionSettings = null; // Force checking state of the caller
+		}
+
+		let children = parent.getChildren();
+		if(children) {
+			for(i = children.length; --i >= 0; ) {
+				let child = children[i];
+				if(child !== sectionSettings) {
+					let childState = this._getSectionState(child);
+					state = CheckboxPlugin._mergeState(childState, state);
+					if(state === "partial") {
+						break;
+					}
+				}
+			}
+		}
+	}
+
+	// sync disable status to header checkbox
+	if(dv) {
+		let titleSection = host.getSectionSettings("title");
+		let disabled = this._getGroupDisabledState(dv);
+		let checkboxes = this._getAllCheckboxes(titleSection);
+		checkboxes.forEach(disabled ? CheckboxPlugin._addDisabledProp : CheckboxPlugin._removeDisabledProp);
+	}
+
+	this._setSectionState(parent, state);
+	this._syncAscendantState(parent, state);
+};
+/** @private
+* @param {Object} sectionSettings Grid sectionSettings object
+* @param {string} state
+*/
+CheckboxPlugin.prototype._setSectionState = function (sectionSettings, state) {
+	if(!state) {
+		return;
+	}
+
+	if(this._isDataBound(sectionSettings)) {
+		let checked = (state !== "unchecked");
+		let dv = /** @type{DataView} */(sectionSettings.getDataSource());
+		let memberRids = this._getRowMemberIdsInView(dv);
+		this._setColumnData(dv, this._checkboxField, checked, memberRids);
+	} else {
+		let checkboxes = this._getAllCheckboxes(sectionSettings);
+		for(let i = checkboxes.length; --i >= 0; ) {
+			CheckboxPlugin._setCheckState(checkboxes[i], state);
+		}
+	}
+};
+
+/** similar to check section type = content
+* @private
+* @param {Object} sectionSettings Grid sectionSettings object
+* @return {boolean}
+*/
+CheckboxPlugin.prototype._isDataBound = function (sectionSettings) {
+	if(this._checkboxField) {
+		if(sectionSettings.getDataSource()) {
+			if(sectionSettings.getType() === "content") {
+				return true;
+			}
+		}
+	}
+	return false;
+};
+
+/** @private
+* @param {Object=} e
+*/
+CheckboxPlugin.prototype._onColumnIndexChanged = function (e) {
+	this._displayColumn = -1;
+};
+/** @private
+* @param {Object=} e
+*/
+CheckboxPlugin.prototype._onColumnAdded = function(e) {
+	if(this._initializing) {
+		return;
+	}
+
+	let host = this._hosts[0];
+	if(host) {
+		let column = e.context;
+		if(column) {
+			if(column.checkboxColumn) { // Ignore this if we already have one
+				let existingCheckbox = this.getCheckboxColumnIndex();
+				if(existingCheckbox < 0) { // Only if there is no existing checkbox column
+					this._displayColumn = e.colIndex;
+					let colData = this._newColumnData(e.colIndex, host);
+					colData.isCheckboxColumn = true; // Mark the column for later referencing
+					// TODO: Extend or replace the column options with our checkbox column
+				}
+			}
+			this._requestUIPopulation();
+		}
+	}
+};
+/** @private
+* @param {Object=} e
+*/
+CheckboxPlugin.prototype._requestUIPopulation = function (e) {
+	if(!this._updateTimer) {
+		this._updateTimer = setTimeout(this._populateUIs, 50);
+	}
+};
+
+/** @private */
+CheckboxPlugin.prototype._populateUIs = function () {
+	this._updateTimer = 0;
+
+	if(this._initializing) { return; }
+
+	let host = this._hosts[0];
+	if(!host) { return; }
+
+	this._initializing = true;
+
+	if(this._userCheckboxIdx >= 0) {
+		// TODO: Ensure that the index is valid with current grid UI
+		this._displayColumn = this._userCheckboxIdx;
+		this._userCheckboxIdx = -1;
+	} else {
+		this._displayColumn = -1; // Force updating to avoid duplication with existing checkbox column
+		this.getCheckboxColumnIndex();
+
+		if(this._displayColumn < 0) {
+			// In case checkbox extension doesn't load during grid beforeInit (eg. load checkbox extension at runtime)
+			let chbxCol = this._genCheckboxColumn();
+			if(this._compositeGrid) { // TODO: This could be unnecessary workaround
+				let model = this._compositeGrid.getModel();
+				let columns = model ? model.columns : null;
+				if(columns) {
+					columns.unshift(chbxCol); // TODO: Check if this is appropriate
+				}
+				host.insertColumn(0, chbxCol); // preSectionRender and columnAdded is fired
+			} else if(this._realTimeGrid) { // TODO: Handle multiple grids
+				this._realTimeGrid.insertColumn(chbxCol, 0);
+			}
+
+			this._displayColumn = 0;
+		}
+	}
+
+	let colData = this._newColumnData(this._displayColumn, host);
+	colData.isCheckboxColumn = true; // Mark the column for later referencing
+
+	// HACK: for filter-input extension
+	let filterInput = colData.filterInputOption;
+	if(!filterInput) {
+		filterInput = colData.filterInputOption = {};
+	}
+	filterInput.disabled = true;
+
+	this._createCheckboxes(host.getSectionSettings("title")); // For title
+	host.requestRowRefresh(); // For content
+	this._initializing = false;
+};
+
+/** @private
+* @param {Event} e
+* @param {boolean=} toggling
+*/
+CheckboxPlugin.prototype._onCheckboxChanged = function (e, toggling) {
+	let chkbox = e ? /** @type{Element} */(e.currentTarget) : null;
+	if(!chkbox) {
+		return;
+	}
+
+	// after checkbox change by user clicked action
+	// the checkbox state is change only 'unchecked' or 'checked' only
+	// so we must remove 'square-shape' class that use in only 'partial' state
+	chkbox.classList.remove('square-shape');
+
+	let newState = CheckboxPlugin._getCheckState(chkbox);
+	if(toggling) {
+		newState = CheckboxPlugin._toggleState(newState);
+	}
+	let checked = newState !== "unchecked";
+
+	let host = this._hosts[0];
+	let pos = host.getRelativePosition(e); // Getting row index
+	let sectionSettings = pos["sectionSettings"];
+	if(!sectionSettings) {
+		return; // Unsuccessful hit testing
+	}
+
+	if(this._isDataBound(sectionSettings)) {
+		let dv = sectionSettings.getDataSource();
+		let rowIndex = pos["rowIndex"];
+		let rid = dv.getRowId(rowIndex);
+
+		if(this._isCheckboxDisabled(dv, rid)) { // TODO: Check if this is necessary
+			return;
+		}
+
+
+		let changeRange = null;
+		if(e.shiftKey && this._anchorRowId) { // Select/deselect range of checkboxes
+			let prevIndex = dv.getRowIndex(this._anchorRowId);
+			if(prevIndex >= 0) {
+				let i;
+				if(prevIndex < rowIndex) {
+					changeRange = [];
+					for(i = prevIndex; i <= rowIndex; ++i) {
+						changeRange.push(i);
+					}
+				} else if(rowIndex < prevIndex) {
+					changeRange = [];
+					for(i = rowIndex; i <= prevIndex; ++i) {
+						changeRange.push(i);
+					}
+				}
+			}
+		}
+
+		if(changeRange) {
+			this.setCheckStates(changeRange, !e.altKey);
+		} else {
+			let subGroup = dv.getGroupByRowId(rid);
+			if(subGroup) {
+				let rowMemberIds = this._getRowMemberIdsOfSubgroup(dv, subGroup);
+				this._setColumnData(dv, this._checkboxField, checked, rowMemberIds);
+
+				// WORKAROUND: to force group move to next state from partial state
+				if(newState === 'checked' && chkbox._prevState === 'partial') {
+					chkbox._forceNewState = newState;
+				}
+			} else {
+				this._setData(dv, rowIndex, this._checkboxField, checked);
+			}
+		}
+	}
+
+	this._setDescendantCheckState(sectionSettings, newState); // This only works with root section where root UI is linked with its children section.
+	this._syncAscendantState(sectionSettings); // The clicked row may be a member of row group and thus the state has to be calculated
+
+	if(this.hasListener("clicked")) {
+		pos["checkbox"] = chkbox;
+		pos["checkState"] = newState;
+		pos["checked"] = checked;
+		this._dispatch("clicked", pos);
+	}
+
+	e.stopPropagation();
+};
+
+/** @public
+* @description Check/Uncheck a specified row by a simulated mouse click input. This is for testing purpose.
+* @ignore
+* @param {Object} sectionRef Grid SectionReference object
+* @param {number} rowIndex
+* @param {Object=} context
+*/
+CheckboxPlugin.prototype.toggleCheckByMouse = function(sectionRef, rowIndex, context) {
+	let eventObj = context || {};
+	eventObj.sectionType = sectionRef;
+	eventObj = this._mockMouseEvent(this._displayColumn, rowIndex, eventObj);
+
+	let checkbox = this.getCheckbox(sectionRef, rowIndex);
+	if(!checkbox) {
+		return;
+	}
+	let curState = CheckboxPlugin._getCheckState(checkbox);
+	CheckboxPlugin._setBooleanProp(checkbox, "checked", curState !== "checked");
+	eventObj.currentTarget = eventObj.target = checkbox;
+
+	this._onCheckboxMousedown(eventObj);
+	this._onCheckboxClicked(eventObj);
+};
+/** @public
+* @description Supply an keyboard input. This is for testing purpose.
+* @ignore
+* @param {string} keyName
+* @param {number} rowIndex
+* @param {Object} context
+*/
+CheckboxPlugin.prototype.supplyKey = function(keyName, rowIndex, context) {
+	let checkbox = this.getCheckbox("content", rowIndex);
+	let eventObj = this._mockKeyboardEvent(keyName, context);
+	eventObj.currentTarget = eventObj.target = checkbox;
+	this._onCheckboxKeydown(eventObj);
+};
+
+/** @private
+* @param {Event} e
+*/
+CheckboxPlugin.prototype._onCheckboxClicked = function (e) {
+	let v1 = this._coralCheckboxVer === 1;
+	if(v1) {
+		// Workaround for duplicate event from ef-checkbox
+		if(e.target.tagName === "LABEL") {
+			return;
+		}
+	}
+
+	// State of the ef-checkbox will not be reflected immediately after click in ELF v1
+	this._onCheckboxChanged(e, v1);
+};
+/** @private
+* @param {Event} e
+*/
+CheckboxPlugin.prototype._onCheckboxKeydown = function (e) {
+	let keyCode = e.keyCode;
+	if(keyCode === 32) {
+		this._onCheckboxMousedown(e); // Set anchor if no shift key is pressed
+		this._onCheckboxChanged(e, true);
+		e.preventDefault();
+	} if(keyCode === 38 || keyCode === 40) { // Arrow key up and down
+		let host = this._hosts[0];
+		let pos = host.getRelativePosition(e.currentTarget);
+		if(pos.sectionType === "content") {
+			let dv = host.getDataSource();
+			let offset = (keyCode === 38) ? -1 : 1;
+			let nextIndex = pos.rowIndex + offset;
+			let rowId = dv.getRowId(nextIndex);
+			if(rowId) {
+				host.scrollToRow(null, nextIndex);
+				let chkbox = this._getCheckbox(pos.section, nextIndex);
+				if(chkbox) {
+					chkbox.focus();
+				}
+				e.preventDefault();
+			}
+		}
+
+
+	}
+};
+/** @private
+* @param {Event} e
+*/
+CheckboxPlugin.prototype._onCheckboxMousedown = function (e) {
+	if(!e.shiftKey) {
+		this._anchorRowId = "";
+		let host = this._hosts[0];
+		let pos = host.getRelativePosition(e.currentTarget);
+		if(pos.sectionType === "content") {
+			let dv = host.getDataSource();
+			this._anchorRowId = dv.getRowId(pos.rowIndex);
+		}
+	}
+};
+
+/** get member items in view. the items in view are items on current page and already filtered , include items in collapsed group
+* @private
+* @param {Object} view Root DataView object
+* @param {Object} targetGroup Subgroup DataView object
+* @return {!Array.<string>} list of row member ids of group in view
+*/
+CheckboxPlugin.prototype._getRowMemberIdsOfSubgroup = function (view, targetGroup) {
+	let memberIds = this._getRowMemberIdsInView(view); // Slow
+
+	// WARNING: Subgroup header row may not be in the view
+	let subgroupMembers = targetGroup.isCollapsed() ? targetGroup.getAllRowIds(true) : targetGroup.getVisibleRowIds(true);
+	let beginPos = 0;
+	let result = [];
+	let len = subgroupMembers.length;
+	// TODO: Use object map instead of indexOf for checking
+	for(let i = 0; i < len; i++) {
+		let subgroupMember = subgroupMembers[i];
+		let pos = memberIds.indexOf(subgroupMember, beginPos);
+		if(pos >= 0) {
+			beginPos = pos + 1;
+			result.push(subgroupMember);
+		}
+	}
+
+	return result;
+};
+
+/** Get all member rows that are in the given view and all members in a collapsed group. This excludes group header row ids.
+* Only valid row ids are returned. Row expansions and disabled rows are excluded.
+* @private
+* @param {Object} view DataView or DataTable object
+* @return {!Array.<string>} list of row member ids in view
+*/
+CheckboxPlugin.prototype._getRowMemberIdsInView = function (view) {
+	if(view.getDataSource()) { // check is dataView
+		// TODO: support multi-level grouping
+		// if view is DataView -> view.getVisibleRowIds(true) will get member and group rowIds in view
+		let rids = view.isCollapsed() ? view.getAllRowIds(true) : view.getVisibleRowIds(true); // get All member and group rowIds
+		let len = rids.length;
+		let allRids = [];
+		for(let i = 0; i < len; i++) { // loop check whether rowIds is group or just row member
+			allRids = CheckboxPlugin._collectRowMemberId(view, allRids, rids[i]);
+		}
+
+		// if view is DataView, the intention is to get data with applied filter/hidden. row expansion should also filtered out.
+		return allRids.filter(CheckboxPlugin._checkableRow.bind(null, view, this._isCheckboxDisabled));
+	} else {
+		// if view is DataTable -> view.getAllRowIds(true) will get all member in grid regardless of hidden/filtered state.
+		return view.getAllRowIds(true);
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+CheckboxPlugin.prototype._onPreSectionRender = function (e) {
+	let displayCol = this.getCheckboxColumnIndex();
+	if(displayCol < e["fromColIndex"] || displayCol >= e["toColIndex"]) {
+		return;
+	}
+
+	let sectionSettings = /** @type{SectionSettings} */(e["sectionSettings"]);
+	if(sectionSettings.getType() !== "title") {
+		return;
+	}
+	this._createCheckboxes(sectionSettings, e["fromRowIndex"], e["toRowIndex"]);
+};
+
+/** @private
+* @param {Object} sectionSettings core grid sectionSettings
+* @param {number=} fromRow
+* @param {number=} toRow
+*/
+CheckboxPlugin.prototype._createCheckboxes = function (sectionSettings, fromRow, toRow) {
+	let displayCol = this.getCheckboxColumnIndex();
+	if(displayCol < 0) {
+		return;
+	}
+	if(!sectionSettings) {
+		return;
+	}
+	if(CheckboxPlugin._exceptions[sectionSettings.getSectionName()]) {
+		return;
+	}
+
+	let section = sectionSettings.getSection();
+	let fi = (fromRow != null) ? fromRow : section.getFirstIndexInView();
+	let li = (toRow != null) ? toRow : section.getLastIndexInView() + 1;
+
+	for(let r = fi; r < li; ++r) {
+		this._createCheckbox(sectionSettings, displayCol, r);
+	}
+};
+/** @private
+* @param {Object} e
+*/
+CheckboxPlugin.prototype._onPostSectionDataBinding = function (e) {
+	if(!this._checkboxField) {
+		return;
+	}
+	let displayCol = this.getCheckboxColumnIndex();
+	if(displayCol < 0) { return; }
+
+	let section = /** @type{ILayoutGrid} */(e["section"]);
+	let dv = /** @type{DataView} */(e["dataSource"]);
+
+	let fromR = /** @type{number} */(e["fromRowIndex"]);
+	if(dv.hasGroup()) { // This is because we need to update group header when any group member is updated
+		fromR = section.getFirstIndexInView();
+	}
+
+	let toR = /** @type{number} */(e["toRowIndex"]);
+	let bindingCount = toR - fromR;
+	if(bindingCount <= 0) {
+		return;
+	}
+
+	let checkboxes = new Array(bindingCount);
+
+	let i, rowIndex, chkbox, rowData;
+	let arg = null;
+	let hasBinding = this.hasListener("checkboxBinding");
+	if(hasBinding) {
+		arg = {
+			"colIndex": displayCol
+		};
+	}
+
+	let sectionSettings = /** @type{SectionSettings} */(e["sectionSettings"]);
+	for(i = 0; i < bindingCount; ++i) {
+		rowIndex = fromR + i;
+		chkbox = checkboxes[i] = this._getCheckbox(sectionSettings, rowIndex);
+		if(!chkbox) {
+			chkbox = checkboxes[i] = this._createCheckbox(sectionSettings, this._displayColumn, rowIndex);
+		}
+		chkbox.setAttribute("aria-label", "row " + rowIndex);
+		let rowId = dv.getRowId(rowIndex); // Slow
+		rowData = this._getRowFromId(dv, rowId);
+		if(hasBinding && chkbox) {
+			arg["checkbox"] = chkbox;
+			arg["rowIndex"] = rowIndex;
+			arg["rowData"] = rowData;
+			this._dispatch("checkboxBinding", arg);
+		}
+
+		let disabled = false;
+		let state = "";
+		if(rowData) {
+			state = CheckboxPlugin._toCheckState(rowData[this._checkboxField]);
+			disabled = rowData[this._disablingField] === true;
+		} else { // Group header row has no rowData
+			let groupSetting = dv.getGroupByRowId(rowId);
+			disabled = this._getGroupDisabledState(groupSetting);
+			state = disabled ? "unchecked" : this._getGroupState(groupSetting);
+		}
+		if(this._autoRowSelection) {
+			section.setSelectedRow(rowIndex, (rowData || false) && state === "checked");
+		}
+
+		if(chkbox) {
+			CheckboxPlugin._setBooleanProp(chkbox, "disabled", disabled);
+			CheckboxPlugin._setCheckState(chkbox, state);
+		}
+	}
+
+	if(e.actualUpdate) {
+		this._syncAscendantState(e["sectionSettings"], null, dv);
+	}
+};
+
+
+
+export default CheckboxPlugin;
+export { CheckboxPlugin, CheckboxPlugin as Checkbox, CheckboxPlugin as CheckboxExtension };