Custom column resize handle events getting replaced

[akbaruddink]

Hi All,

I'm trying to alter column resize behaviour using a custom plugin. But, all my drag events are replaced with SlickGrid's implementation as soon as I start to drag the resize handle in the header.

my-plugin.js

(function ($) {
    // Register namespace
    $.extend(true, window, {
        "Slick": {
            "ColRes": ColResBehaviour
        }
    });

    function ColResBehaviour(options) {
        var _grid;
        var _self = this;
        var _defaults = {};

        /**
         * Initialize plugin.
         */
        function init(grid) {
            options = $.extend(true, {}, _defaults, options);
            _grid = grid;

            var _header = _grid.getHeader()

            $(_header).find('.slick-resizable-handle').off('dragstart drag dragend')
            $(_header).find('.slick-resizable-handle').on('dragstart', function (e) {
                if (!_grid.getEditorLock().commitCurrentEdit()) {
                    return false;
                }
                // pageX = e.pageX;
                $(this).parent().addClass("slick-header-column-active");
                console.warn('drag has started')
                var _this = jQuery(this)
                var _columnIndex = _this.parent().index()
                // var _columns = _grid.getColumns()
                // var _column = _columns[_columnIndex]

                $('.' + _grid.getUID()).find('.slick-row').each(function () {
                    jQuery(this).find('.slick-cell').each(function (slickCellIndex) {
                        if (slickCellIndex === _columnIndex) {
                            jQuery(this).css('border-right', '1px dotted silver')
                        }
                    }) // .css('border', '')
                })

                e.stopImmediatePropagation()
            }).on('drag', function () {
                console.warn('dragging')
                var _this = jQuery(this)
                var _columnIndex = _this.parent().index()
                var _columns = _grid.getColumns()
                var _column = _columns[_columnIndex]

                if (_column.minWidth && (_this.parent().width() <= _column.minWidth)) {
                    _column.width = _column.minWidth
                    _grid.setColumns(_columns);

                    // _grid.render()
                }

                e.stopImmediatePropagation()
            }).on('dragend', function () {
                console.warn('drag has ended')
                var _this = jQuery(this)
                var _columnIndex = _this.parent().index()
                var _columns = _grid.getColumns()
                var _column = _columns[_columnIndex]

                $('.' + _grid.getUID()).find('.slick-row').each(function () {
                    jQuery(this).find('.slick-cell').each(function (slickCellIndex) {
                        if ((_columnIndex !== (_columns.length - 1)) && (slickCellIndex === _columnIndex)) {
                            jQuery(this).css('border-right', 'none')
                        }
                    }) // .css('border', '')
                })

                e.stopImmediatePropagation()
            })
        }

        /**
         * Destroy plugin.
         */
        function destroy() {
            // Destroy plugin
        }

        // Public API
        $.extend(this, {
            "init": init,
            "destroy": destroy
        });
    }
})(jQuery);

This is how I'm trying to attach the above plugin to SlickGrid.

const data = [{
    name: "john",
    age: 24,
    gender: "M"
}]

const columns = [{
    id: "name",
    name: "Name",
    field: "name",
    width: 100
}, {
    id: "age",
    name: "Age",
    field: "age"
}, {
    id: "gender",
    name: "Gender",
    field: "gender"
}]

const options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    forceFitColumns: true
}

let grid = new Slick.Grid('#my-grid', data, columns, options)
grid.registerPlugin(new Slick.ColRes());
grid.render()