SlickGrid - Drag column header outside table

Question

Is there any way to tap into dragstart/end event of the SlickGrid? I am trying to take the text from the SlickGrid column header and drop on the other object.

Answer 1

It uses jquery sortable for column sorting so you can hook to the events by modifying the setupColumnReorder function in slick.grid.js

I have added my own event handlers: onColumnsReorderStart onBeforeColumnsReordered

function setupColumnReorder() {
  $headers.filter(":ui-sortable").sortable("destroy");
  $headers.sortable({
    containment: "parent",
    distance: 3,
    axis: "x",
    cursor: "default",
    tolerance: "intersection",
    helper: "clone",
    placeholder: "slick-sortable-placeholder ui-state-default slick-header-column",
    start: function (e, ui) {
      ui.placeholder.width(ui.helper.outerWidth() - headerColumnWidthDiff);
      $(ui.helper).addClass("slick-header-column-active");
      trigger(self.onColumnsReorderStart, ui);//added HERE
    },
    beforeStop: function (e, ui) {
        $(ui.helper).removeClass("slick-header-column-active");
        trigger(self.onBeforeColumnsReordered, ui);//added HERE
    },
    stop: function (e) {
      if (!getEditorLock().commitCurrentEdit()) {
        $(this).sortable("cancel");
        return;
      }

      var reorderedIds = $headers.sortable("toArray");
      var reorderedColumns = [];
      for (var i = 0; i < reorderedIds.length; i++) {
        reorderedColumns.push(columns[getColumnIndex(reorderedIds[i].replace(uid, ""))]);
      }
      setColumns(reorderedColumns);

      trigger(self.onColumnsReordered, {});
      e.stopPropagation();
      setupColumnResize();
    }
  });
}

and in the same file you need to register the events:

// Public API

$.extend(this, {
  "slickGridVersion": "2.1",

  // Events
  "onScroll": new Slick.Event(),
  "onSort": new Slick.Event(),
  "onHeaderMouseEnter": new Slick.Event(),
  "onHeaderMouseLeave": new Slick.Event(),
  "onHeaderContextMenu": new Slick.Event(),
  "onHeaderClick": new Slick.Event(),
  "onHeaderCellRendered": new Slick.Event(),
  "onBeforeHeaderCellDestroy": new Slick.Event(),
  "onHeaderRowCellRendered": new Slick.Event(),
  "onBeforeHeaderRowCellDestroy": new Slick.Event(),
  "onMouseEnter": new Slick.Event(),
  "onMouseLeave": new Slick.Event(),
  "onClick": new Slick.Event(),
  "onDblClick": new Slick.Event(),
  "onContextMenu": new Slick.Event(),
  "onKeyDown": new Slick.Event(),
  "onAddNewRow": new Slick.Event(),
  "onValidationError": new Slick.Event(),

  "onViewportChanged": new Slick.Event(),
  "onColumnsReorderStart": new Slick.Event(),//added HERE
  "onColumnsReordered": new Slick.Event(),
  "onBeforeColumnsReordered": new Slick.Event(),//added HERE
  "onColumnsResized": new Slick.Event(),
  "onCellChange": new Slick.Event(),
  "onBeforeEditCell": new Slick.Event(),
  "onBeforeCellEditorDestroy": new Slick.Event(),
  "onBeforeDestroy": new Slick.Event(),
  "onActiveCellChanged": new Slick.Event(),
  "onActiveCellPositionChanged": new Slick.Event(),
  "onDragInit": new Slick.Event(),
  "onDragStart": new Slick.Event(),
  "onDrag": new Slick.Event(),
  "onDragEnd": new Slick.Event(),
  "onSelectedRowsChanged": new Slick.Event(),
  "onCellCssStylesChanged": new Slick.Event(),

...

Use it then like this:

    grid.onColumnsReordered.subscribe(function (s, e) {
        console.log('onColumnsReordered');
        var myItem = e.item;
    });
    grid.onColumnsReorderStart.subscribe(function (s, e) {
        console.log('onColumnsReorderStart');
        var myItem2 = e.item;
    });

    grid.onBeforeColumnsReordered.subscribe(function (s, e) {
        console.log('onBeforeColumnsReordered');
    });