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

[6pac]

Note that the grid's setupColumnResize() function replaces the slick-resizable-handle elements completely, rather than just turning events on or off. Perhaps you should look more closely at the life cycle of the resize process.

What is your use case for overriding the resize?

[ghiscoding]

The code has changed a lot since this issue was open, we removed jQueryUI in v3.x and we just released v4.0.0-beta.0 which removes jQuery entirely, feel free to reopen if this is still an issue with latest version