ExtJs – Grouped Grid Checkbox Column

ExtJs Grid has a lot of features built in. Some examples are the Grouped Grid and the Checkbox Selection.

However, grouping these two together poses a bit of a challenge.

After searching on the forums, this post guided me into a nice, working example.

The Grouping Check column has been created as a feature.

Ext.define('App.GroupedCheckboxFeature', {
	extend: 'Ext.grid.feature.Grouping',
	alias: 'feature.groupedcheckbox',

	/** @property */
	targetCls: 'group-checkbox',
	/** @property */
	checkDataIndex: 'isChecked',
	startCollapsed: true,

	constructor: function (config) {
		config.groupHeaderTpl = ['<div class="group-header"><input class="' + this.targetCls + '" {[values.record.get("' + this.checkDataIndex + '") ? "checked" : ""]} type="checkbox"/><span class="group-title">{name}</span></div>'];
		this.callParent(arguments);
	},

	init: function (grid) {
		var store = grid.getStore();
		if (store) {
			store.on('update', this.onStoreUpdate, this);
		}
		this.callParent(arguments);
	},

	setupRowData: function (record, idx, rowValues) {
		this.callParent(arguments);
		// Ext JS 6 vs Ext JS 5.1.1 vs Ext JS 5.1.0-
		var groupInfo = this.groupRenderInfo || this.metaGroupCache || this.groupInfo;
		groupInfo.record = this.getParentRecord(record.get(this.getGroupField()));
	},

	/**
	 * This method will only run once... on the initial load of the view... this
	 * is so we can check the store for the grouped item's children... if they're
	 * all checked, then we need to set the private variable to checked
	 */
	checkAllGroups: function (groupName) {
		var store = this.view.getStore();
		var groupField = this.getGroupField();
		if (store) {
			var groups = store.getGroups();
			if (groups) {
				groups.each(function (groupRec) {
					var allChecked = true;
					var groupKey = groupRec.getGroupKey();
					var checkGroup = true;
					if (groupName) {
						if (groupKey !== groupName) {
							checkGroup = false;
						}
					}
					if (checkGroup) {
						groupRec.each(function (rec) {
							allChecked = rec.get(this.checkDataIndex);
							groupName = rec.get(groupField);
							if (allChecked === false) {
								return false;
							}
						}, this);
						this.updateParentRecord(groupName, allChecked);
					}
				}, this);
			}
		}
	},

	updateParentRecord: function (groupName, checked) {
		var parentRecord = this.getParentRecord(groupName);
		if (parentRecord) {
			parentRecord.set(this.checkDataIndex, checked);
			this.refreshView();
		}
	},

	getParentRecord: function (groupName) {
		var parentRecord;
		var metaGroup;
		// For Ext JS 6 and 5.1.1
		if (this.getMetaGroup) {
			metaGroup = this.getMetaGroup(groupName);
		}
		// For Ext JS 5.1-
		else {
			metaGroup = this.groupCache[groupName];
		}
		if (metaGroup) {
			parentRecord = metaGroup.placeholder;
		}
		return parentRecord;
	},

	/**
	 * TODO: This might break... we're using a private variable here... but this
	 * is the only way we can refresh the view without breaking any sort of
	 * scrolling... I'm not sure how to only refresh the group header itself, so
	 * I'm keeping the groupName as a param passing in... might be able to figure
	 * this out later
	 * @param {String} groupName
	 */
	refreshView: function (groupName) {
		var view = this.view;
		if (view) {
			view.refreshView();
		}
	},

	onStoreUpdate: function (store, record, operation, modifiedFieldNames, details, eOpts) {
		var grid = this.grid;
		if (!this.updatingRecords && grid && record) {
			var groupName = record.get(this.getGroupField());
			this.checkAllGroups(groupName);
			grid.setSelection(record);
			this.refreshView(groupName);
		}
	},

	onGroupClick: function (grid, node, group, event, eOpts) {
		if (event && grid) {
			var target = event.getTarget('.' + this.targetCls);
			var store = grid.getStore();
			var groupRecord = this.getRecordGroup(event.record);
			if (target && store && groupRecord) {
				var checked = target.checked;
				this.updatingRecords = true;
				groupRecord.each(function (rec, index) {
					rec.beginEdit();
					rec.set(this.checkDataIndex, checked);
					rec.endEdit(true);
				}, this);
				this.updatingRecords = false;
				this.updateParentRecord(group, checked);
			} else {
				this.callParent(arguments);
			}
		}
	}
});

The Grid itself is a regular grid.

Ext.define('App.view.Main', {
	extend: 'Ext.container.Viewport'

	, items: [{
		xtype: 'grid'
		, title: 'ExtJs - Grouped Grid Checkbox Column'
		, titleAlign: 'center'

		, viewConfig: {
			markDirty: false
		}

		, features: [{
			ftype: 'groupedcheckbox',
			enableGroupingMenu: false,
			hideGroupHeader: true,
			//startCollapsed: true // produces strange bug
		}]

		, store: {
			fields: ['name', 'department', 'isChecked']
			, groupField: 'department'

			, proxy: {
				type: 'rest'
				, url: 'data/store.json'
				, reader: {
					type: 'json'
					, rootProperty: 'values'
				}
			}

			, autoLoad: true
		}

		, columns: {
			defaults: {
				menuDisabled: true
				, scrollable: true
				, hideable: false
				, draggable: false
			}
			, items: [{
				xtype: 'checkcolumn'
				, headerCheckbox: true
				, text: ''
				, dataIndex: 'isChecked'
				, width: 50
			}, {
				text: 'Name'
				, dataIndex: 'name'
				, flex: 1
			}, {
				text: 'Department'
				, dataIndex: 'department'
				, flex: 1
			}]
		}
	}]


});

But although it worked perfectly, the styling looked a bit off and that’s because it uses the standard HTML checkbox.

I had to hunt around for trying to customize it to look like an ExtJs checkbox.

Finally, with the help of this Stackoverflow solution, I was able to solve it!

I also did a bit of customization to the GroupHeaderTpl from the original post to make the group header texts align correctly (as seen above in the GroupedCheckboxFeature ).

.group-header {
	display: flex;
	align-items: center;
	vertical-align: middle;
}

.group-title {
	font-weight: bold;
}

input[type="checkbox"] {
	width: 15px;
	height: 15px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin-right: 10px;
	background-color: #ffffff;
	outline: 0;
	border: 1px solid #919191;
	border-radius: 3px;
	display: inline-block;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
}

input[type="checkbox"]:focus {
	outline: none;
	border: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
}

input[type="checkbox"]:checked {
	outline: none;
	border: none !important;
	text-align: center;
	line-height: 15px;
}

input[type="checkbox"]:checked::after {
	content: "\e613";
	font: 18px/1 "ExtJS";
	color: #919191;
}