Two slick grid questions: 1. How to highlight the column header, 2. How to get to know when the end of scroll has happened

Question

I am building a website using slickgrid and I have these two problems:

1. I want to select the entire column whenever the user clicks on the column header. I have been able to change the style of the cells as given in this example. I have not been able to figure out how to change the style of the column header

2. How to get to know when the end of scroll has happened in slickgrid. I am currently doing

   $(".slick-viewport").scroll(function () {
       if ($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight()) {
           handle_end_of_scroll()
       }
   })
   

But I am dependent on the css class name of the slick grid body and I might have issues if I end up updating slickgrid later to a newer version. I might have to update this part of the code if the implementation of slickgrid changes.

Answer 1

Change the style of a header

You could force an update to a header which would trigger a onHeaderCellRendered event in which you could then change the class on the header. Pretty messy, though.

grid.onHeaderCellRendered.subscribe(function (e, args) {
    var headerCell = args.node;
});
grid.updateColumnHeader('columnID');

Check if scrolled to end

Binding to scroll events directly is always bad. You should subscribe the the onViewportChanged event and getViewport method to check if you have reached the end.

grid.onViewportChanged.subscribe(function () {
    var lastRow = grid.getViewport().bottom;
    if (lastRow >= grid.getDataLength() - 1) {
        console.log('at bottom');
    }
});