Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
slickgrid custom plugins
(function ($) {
// register namespace
$.extend(true, window, {
"Slick": {
"CheckboxSelectionModel": CheckboxSelectionModel
}
});
function CheckboxSelectionModel(options) {
var _ranges = [];
var _self = this;
function init(grid) {
_self._grid = grid;
_self._grid.onClick.subscribe(handleGridClick);
}
function destroy() {
_self._grid.onClick.unsubscribe(self.handleGridClick);
}
function rangesToRows(ranges) {
var rows = [];
for (var i = 0; i < ranges.length; i++) {
for (var j = ranges[i].fromRow; j <= ranges[i].toRow; j++) {
rows.push(j);
}
}
return rows;
}
function rowsToRanges(rows) {
var ranges = [];
var lastCell = _self._grid.getColumns().length - 1;
for (var i = 0; i < rows.length; i++) {
ranges.push(new Slick.Range(rows[i], 0, rows[i], lastCell));
}
return ranges;
}
function setSelectedRanges(ranges) {
if ((!_ranges || _ranges.length === 0) && (!ranges || ranges.length === 0)) { return; }
_ranges = ranges;
_self.onSelectedRangesChanged.notify(_ranges);
}
function handleGridClick(e, args) {
if ($(e.target.previousElementSibling).is(':checkbox'))
{
var checkbox = $(e.target.previousElementSibling);
var selection = rangesToRows(_ranges);
var dataItem = _self._grid.getDataItem(args.row);
if (!checkbox.is(":checked"))
{
if (dataItem instanceof Slick.Group) {
$.each(dataItem.rows, function(index, groupRow) {
var groupRowIndex = _self._grid.getData().getRowById(groupRow.id);
if (groupRowIndex) {
selection.push(groupRowIndex);
}
});
}
else
{
selection.push(args.row);
}
}
else if (checkbox.is(":checked"))
{
if (dataItem instanceof Slick.Group) {
$.each(dataItem.rows, function(index, groupRow) {
var groupRowIndex = _self._grid.getData().getRowById(groupRow.id);
if (groupRowIndex) {
var indexInSelection = selection.indexOf(groupRowIndex);
selection.splice(indexInSelection, 1);
}
});
}
else
{
selection.splice(selection.indexOf(args.row), 1);
}
}
var tempRanges = rowsToRanges(selection);
setSelectedRanges(tempRanges);
}
}
function getSelectedRanges() {
return _ranges;
}
$.extend(this, {
"init": init,
"destroy": destroy,
"setSelectedRanges": setSelectedRanges,
"getSelectedRanges": getSelectedRanges,
"onSelectedRangesChanged": new Slick.Event()
});
}
})(jQuery);
(function ($) {
// register namespace
$.extend(true, window, {
"Slick": {
"GroupedCheckboxSelectColumn": GroupedCheckboxSelectColumn
}
});
function GroupedCheckboxSelectColumn(options) {
var _grid;
var _self = this;
var _handler = new Slick.EventHandler();
var _selectedRowsLookup = {};
var _defaults = {
columnId: "_checkbox_selector",
cssClass: null,
toolTip: "Select/Deselect All",
width: 30
};
var _options = $.extend(true, {}, _defaults, options);
function init(grid) {
_grid = grid;
_handler
.subscribe(options.onSelectedRowIdsChangedHandler, handleSelectedRowIdsChanged)
.subscribe(_grid.onClick, handleClick)
.subscribe(_grid.onHeaderClick, handleHeaderClick)
.subscribe(_grid.onKeyDown, handleKeyDown);
}
function destroy() {
_handler.unsubscribeAll();
}
function getColumnHeaderHTML(isChecked, isPartial)
{
var checkboxContainer = $('<label>', {
'class': 'control checkbox',
'title': 'Select/Deselect All'
});
var checkbox = $('<input>', {
'type': 'checkbox',
'checked': isChecked,
'class': 'globalSelector'
}).appendTo(checkboxContainer);
if (isPartial)
{
checkbox.addClass('partial');
}
$('<span>', {
'class': 'control-indicator',
}).appendTo(checkboxContainer);
return checkboxContainer.prop('outerHTML');
}
function getRowSelectorHTML(isChecked)
{
var checkboxContainer = $('<label>', {
'class': 'control checkbox'
});
$('<input>', {
'type': 'checkbox',
'checked': isChecked
}).appendTo(checkboxContainer);
$('<span>', {
'class': 'control-indicator',
}).appendTo(checkboxContainer);
return checkboxContainer.prop('outerHTML');
}
function handleSelectedRowIdsChanged(e, args) {
var selectedRows = _grid.getSelectedRows();
var lookup = {}, row, i;
for (i = 0; i < selectedRows.length; i++) {
row = selectedRows[i];
lookup[row] = true;
if (lookup[row] !== _selectedRowsLookup[row]) {
_grid.invalidateRow(row);
delete _selectedRowsLookup[row];
}
}
for (i in _selectedRowsLookup) {
_grid.invalidateRow(i);
}
_selectedRowsLookup = lookup;
var groups = [];
for (i = 0; i < _grid.getDataLength(); i++) {
var dataItem = _grid.getDataItem(i);
if (dataItem instanceof Slick.Group)
{
_grid.invalidateRow(i);
groups.push(dataItem);
}
}
groups.map(function(group) {
var groupItemIds = group.rows.map(function(groupRow) { return groupRow.id; });
var selectedGroupRows = _grid.getSelectedItems().filter(function(selectedItem) {
return groupItemIds.indexOf(selectedItem.id) > -1;
});
if (selectedGroupRows.length > 0 && selectedGroupRows.length < group.rows.length &&
group.title.indexOf('partial') == -1)
{
group.title = group.title.replace('<input type="checkbox"', '<input type="checkbox" class="partial"');
group.title = group.title.replace('checked="checked"', '');
}
else if (selectedGroupRows.length == 0)
{
group.title = group.title.replace('class="partial"', '');
group.title = group.title.replace('checked="checked"', '');
}
else if (selectedGroupRows.length == group.rows.length && group.title.indexOf('checked="checked"') == -1)
{
group.title = group.title.replace('<input type="checkbox"', '<input type="checkbox" checked="checked"');
}
else if (selectedRows.length && selectedRows.length == 0)
{
group.title = group.title.replace('checked="checked"', '');
}
});
_grid.render();
var itemCount = groups.length == 0 ? 0 : _grid.getData().getGroups().map(function(group) {
return group.rows ? group.rows.length : 0;
}).reduce(function(a, b) {
return a + b;
});
var isChecked = selectedRows.length == itemCount;
var isPartial = selectedRows.length > 0 && selectedRows.length < itemCount;
_grid.updateColumnHeader(_options.columnId, getColumnHeaderHTML(isChecked, isPartial), _options.toolTip);
}
function handleKeyDown(e, args) {
if (e.which == 32) {
if (_grid.getColumns()[args.cell].id === _options.columnId) {
var dataItem = _grid.getDataItem(args.row);
if (!(dataItem instanceof Slick.Group)) {
// if editing, try to commit
if (!_grid.getEditorLock().isActive() || _grid.getEditorLock().commitCurrentEdit()) {
toggleRowSelection(args.row);
}
e.preventDefault();
e.stopImmediatePropagation();
}
}
}
}
function handleClick(e, args) {
// clicking on a row select checkbox
if (_grid.getColumns()[args.cell].id === _options.columnId && $(e.target).is(":checkbox")) {
// if editing, try to commit
if (_grid.getEditorLock().isActive() && !_grid.getEditorLock().commitCurrentEdit()) {
e.preventDefault();
e.stopImmediatePropagation();
return;
}
var dataItem = _grid.getDataItem(args.row);
if (!(dataItem instanceof Slick.Group)) {
toggleRowSelection(args.row);
e.stopPropagation();
e.stopImmediatePropagation();
}
}
}
function toggleRowSelection(row) {
if (_selectedRowsLookup[row]) {
_grid.setSelectedRows($.grep(_grid.getSelectedRows(), function (n) {
return n != row
}));
} else {
_grid.setSelectedRows(_grid.getSelectedRows().concat(row));
}
}
function handleHeaderClick(e, args) {
if (args.column.id == _options.columnId && $(e.target).is(":checkbox")) {
// if editing, try to commit
if (_grid.getEditorLock().isActive() && !_grid.getEditorLock().commitCurrentEdit()) {
e.preventDefault();
e.stopImmediatePropagation();
return;
}
if ($(e.target).is(":checked")) {
var rows = [];
for (var i = 0; i < _grid.getDataLength(); i++) {
if (!(_grid.getDataItem(i) instanceof Slick.Group))
rows.push(i);
}
_grid.setSelectedRows(rows);
} else {
_grid.setSelectedRows([]);
}
e.stopPropagation();
e.stopImmediatePropagation();
}
}
function getColumnDefinition() {
return {
id: _options.columnId,
name: getColumnHeaderHTML(false, false),
toolTip: _options.toolTip,
field: "sel",
width: _options.width,
resizable: false,
sortable: false,
cssClass: _options.cssClass,
formatter: checkboxSelectionFormatter
};
}
function checkboxSelectionFormatter(row, cell, value, columnDef, dataContext) {
if (dataContext) {
return _selectedRowsLookup[row]
? getRowSelectorHTML(true)
: getRowSelectorHTML(false)
}
return null;
}
$.extend(this, {
"init": init,
"destroy": destroy,
"getColumnDefinition": getColumnDefinition
});
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.