Customizing Slick Grid scroll bars

[Olivier Scherrer]

Hi,

I am currently trying to customize scroll bars in slick grid, using something like jScrollPane. I have searched the Net and found a few similar questions being posted but no one seems to have an answer.
Is there any way to do this? Or is this not advisable?

Thanks in advance

Olivier

[Steve Fazekas]

I looked into this early on in my building SlickGrid code into my app and wanted pretty looking scroll bars but I did not understand the code very well at the time - about 8 months ago...  I tried making it happen and gave up after a day or so.

What is required is the scrolling mechanism is not just adding a CSS class to overflow auto.  For the slick-view div, I think you may have to make your own mods to the slick.grid.js in order to change the scrolling.  I think that until you really know the Slick code well enough to make those mods it would be best to implement some vetted updates someone else has come up with. 

From what I understand...
The scroll bars are tied to events which then update the rendering of the grid for the visible rows and columns.  If you understand how these events work with the grid,you will be able to insert your custom code for pretty scroll bars. 

Steve Fazekas


Sent from my iPhone

--
You received this message because you are subscribed to the Google Groups "SlickGrid" group.
To unsubscribe from this group and stop receiving emails from it, send an email to slickgrid+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Michael Leibman]

If you have a small table with limited number of rows, you can try to do it.

Otherwise, this is highly discouraged for performance reasons since you would lose the browser's native scrolling functionality and replace it by something that programmatically controls the .scrollTop.

[Olivier Scherrer]

Hi,

 

Thank you for your answers, that's pretty much what I thought.

 

Cheers,

Olivier

[Rafael Freitas]

I've implemented some modifications on SlickGrid Class (slick.grid.js attached) to accept jScrollPane plugin.

Interface to jScrollPane manipulation in SlickGrid initial options example:

var jScrollApi;

var node = $("#myGrid")

var options = $.extend({

// get 

getScrollPosition: function (viewport) { 

return { top: jScrollApi.getContentPositionY(), left: jScrollApi.getContentPositionX() } 

},

getScrollDimensions: function(viewport) { return { width: 17, height: 17 } }, //calculate yourself the scrolls dimentions

setScrollLeft: function(viewport, value) {

if (jScrollApi) {

             jScrollApi.scrollByX(value);

        }

        else {

            viewport.scrollLeft(value);

        }

},

setScrollTop: (viewport, value) => {

if (jScrollApi) {

            setTimeout(function () { jScrollApi.scrollToY(value); }, 0); // keep the flow

        }

        else {

            viewport.scrollTop(value);

        }

}

}, your_slickGrid_options);

var grid = new Slick.Grid(node, dataView, columns, options);

var viewport = node.find("div.slick-viewport")

viewport.jScrollPane({

    showArrows: true, mouseWheelSpeed: 100,

    animateScroll: true

    , animateEase: "easeOutQuart",

    verticalGutter: 0,

    verticalDragMinHeight: 10,

    horizontalDragMinHeight: 10

});

jScrollApi = viewport.data('jsp');