Override an internal JavaScript function to make it use the Column's Unique Name instead of the DataField when firing the UnGroup Command:
Telerik.Web.UI.GridMobileGroupView.prototype._handleCloseUp = function (e) {
this._groupFieldNames.splice(index, 1);
this._initPositions();
var $target = $(e.target);
var $parentGroupItem = $target.parents(".rgColumnItem");
this._$groupExpressions = this.get_$element().find(".rgColumnItem");
var index = this._$groupExpressions.index($parentGroupItem);
var groupFieldsMap = {};
$(this._dragData).each(function (index, item) {
var elem = item.$element;
groupFieldsMap[elem.data("groupFieldName")] = elem[0];
});
$parentGroupItem.remove();
for (var groupField in groupFieldsMap) {
if (groupFieldsMap[groupField] == $parentGroupItem[0]) {
/** Original */
//this.get_owner().fireCommand("UnGroupByColumn", groupField);
/** Override */
var columnUniqueName = this.get_owner().get_columns().filter(col => col._data.Groupable && col.get_dataField() == groupField)[0].get_uniqueName();
this.get_owner().fireCommand("UnGroupByColumn", columnUniqueName);
break;
}
}
this._groupFieldNames.splice(index, 1);
this._initPositions();
}
Regards,
Attila Antal
Progress Telerik