/**
*
* Draggable Grouping contributed by: Muthukumar Selvarasu
* muthukumar{dot}se{at}gmail{dot}com
* github.com/muthukumarse/Slickgrid
*
* NOTES:
* This plugin provides the Draggable Grouping feature
*/
(function ($) {
// Register namespace
$.extend(true, window, {
"Slick": {
"DraggableGrouping": DraggableGrouping
}
});
/***
* A plugin to add Draggable Grouping feature.
*
* USAGE:
*
* Add the plugin .js & .css files and register it with the grid.
*
*
* The plugin expose the following methods:
* destroy: used to destroy the plugin
* setDroppedGroups: provide option to set default grouping on loading
* clearDroppedGroups: provide option to clear grouping
* getSetupColumnReorder: its function to setup draggable feature agains Header Column, should be passed on grid option. Also possible to pass custom function
*
*
* The plugin expose the following event(s):
* onGroupChanged: pass the grouped columns to who subscribed.
*
* @param options {Object} Options:
* deleteIconCssClass: an extra CSS class to add to the delete button (default undefined), if deleteIconCssClass && deleteIconImage undefined then slick-groupby-remove-image class will be added
* deleteIconImage: a url to the delete button image (default undefined)
* groupIconCssClass: an extra CSS class to add to the grouping field hint (default undefined)
* groupIconImage: a url to the grouping field hint image (default undefined)
* dropPlaceHolderText: option to specify set own placeholder note text
*
*/
function DraggableGrouping(options) {
var _grid;
var _gridUid;
var _gridColumns;
var _dataView;
var dropbox;
var dropboxPlaceholder;
var groupToggler;
var _self = this;
var _defaults = {
};
var onGroupChanged = new Slick.Event();
/**
* Initialize plugin.
*/
function init(grid) {
options = $.extend(true, {}, _defaults, options);
_grid = grid;
_gridUid = _grid.getUID();
_gridColumns = _grid.getColumns();
_dataView = _grid.getData();
dropbox = $(_grid.getPreHeaderPanel());
var dropPlaceHolderText = options.dropPlaceHolderText || 'Drop a column header here to group by the column';
dropbox.html("
");
var groupText = $("
" + column.text() + "
")
groupText.appendTo(entry);
var groupRemoveIcon = $("
")
if(options.deleteIconCssClass) groupRemoveIcon.addClass(options.deleteIconCssClass);
if(options.deleteIconImage) groupRemoveIcon.css("background", "url(" + options.deleteIconImage + ") no-repeat center right");
if(!options.deleteIconCssClass && !options.deleteIconImage) groupRemoveIcon.addClass('slick-groupby-remove-image');
groupRemoveIcon.appendTo(entry);
$("
").appendTo(entry);
entry.appendTo(container);
addColumnGroupBy(e, column, container, entry);
addGroupByRemoveClickHandler(e.id, container, column, entry);
}
}
});
groupToggler.css('display', 'block');
}
}
function addColumnGroupBy(column) {
columnsGroupBy.push(column);
updateGroupBy("add-group");
}
function addGroupByRemoveClickHandler(id, container, column, entry) {
var text = entry;
$("#" + _gridUid + id + "_entry >.slick-groupby-remove").on('click', function() {
$(this).off('click');
removeGroupBy(id, column, text);
});
}
function setDroppedGroups(groupingInfo) {
groupingInfos = (groupingInfo instanceof Array) ? groupingInfo : [groupingInfo];
dropboxPlaceholder.hide()
for (var i = 0; i < groupingInfos.length; i++) {
var column = $(_grid.getHeaderColumn(groupingInfos[i]));
handleGroupByDrop(dropbox, column);
}
}
function clearDroppedGroups() {
columnsGroupBy = [];
updateGroupBy("clear-all");
dropbox.find(".slick-dropped-grouping").remove();
groupToggler.css("display", "none");
dropboxPlaceholder.show()
}
function removeFromArray(arr) {
var what, a = arguments,
L = a.length,
ax;
while (L > 1 && arr.length) {
what = a[--L];
while ((ax = arr.indexOf(what)) != -1) {
arr.splice(ax, 1);
}
}
return arr;
}
function removeGroupBy(id, column, entry) {
entry.remove();
var groupby = [];
_gridColumns.forEach(function(e, i, a) {
groupby[e.id] = e;
});
removeFromArray(columnsGroupBy, groupby[id]);
if(columnsGroupBy.length == 0){
dropboxPlaceholder.show();
}
updateGroupBy("remove-group");
}
function updateGroupBy(originator) {
if (columnsGroupBy.length == 0) {
_dataView.setGrouping([]);
onGroupChanged.notify({ caller: originator, groupColumns: [] });
return;
}
var groupingArray = [];
columnsGroupBy.forEach(function(element, index, array) {
groupingArray.push(element.grouping);
});
_dataView.setGrouping(groupingArray);
/*
collapseAllGroups();
*/
onGroupChanged.notify({ caller: originator, groupColumns: groupingArray})
}
// Public API
$.extend(this, {
"init": init,
"destroy": destroy,
"onGroupChanged": onGroupChanged,
"setDroppedGroups": setDroppedGroups,
"clearDroppedGroups": clearDroppedGroups,
"getSetupColumnReorder": setupColumnReorder,
});
}
})(jQuery);