slickgrid custom plugins

slick.checkboxselectionmodel.js

(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);

slick.groupedcheckboxselectcolumn.js

(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);