Custom scrollbar in ui-grid

Can I change the scrollbar in ui-grid? Maybe someone has already done this?
and the second question
Can I take this piece of code( $templateCache.put('ui-grid/uiGridViewport')),is not ui-grid.js? and make a template?

[stevenlius]

No you can't change it, however, you can hide it, and create your own scrollbar.

[nkoterba]

@stevenlius Any examples or documentation on how to hide it?

[mobichel]

Hi all,

here is example how to modify html & less to get styled scrollbars: #5951

[mobichel]

Here is example how to stlye scrollbar without modification in ui-grid: example

[varunrramani]

@mobichel I'm getting $element.scrollbar as undefined when trying to implement the example posted. I am using 4.0.6 version of ui-grid. is it because I'm dynamically setting height of the grid?

[mobichel]

@varunrramani , please, check that jquery.scrollbar is loaded in your page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.js"></script>

[varunrramani]

I was trying to load it using require, so it wasn't loading the css along with the js. Loaded js and css separately and it worked.

[chandanreddy1206]

Hi @mobichel, Column menus are not placed currenctly with this scroll bar. Below is the fiddle.
https://jsfiddle.net/4rk6c3n0/5/

In repositionMenu:
containerScrollLeft = renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].scrollLeft;

problem is scrollLeft is returning 0.

This is caused by the wrapper div added by jquery.scrollbar

[chandanreddy1206]

soved this by using below code.

'use strict';
angular
  .module('home-module')
  .config(uiGridColumnMenuConfig);

uiGridColumnMenuConfig.$inject = ['$provide'];

function uiGridColumnMenuConfig($provide) {
  $provide.decorator('uiGridColumnMenuService', extendUiGridColumnMenuService);
}

extendUiGridColumnMenuService.$inject = ['$delegate', 'gridUtil'];

function extendUiGridColumnMenuService($delegate, gridUtil) {

  // wrap and overwrite uiGridColumnMenuService object methods
  /* jshint ignore:start */
  var getDirection;
  getDirection = $delegate.getColumnElementPosition;
  /* jshint ignore:end */

  $delegate.getColumnElementPosition = function ($scope, column, $columnElement) {
      var positionData, domColumnElementOffsetParent;
      positionData = {};
      positionData.left = $columnElement[0].offsetLeft;
      positionData.top = $columnElement[0].offsetTop;
      positionData.parentLeft = $columnElement[0].offsetParent.offsetLeft;

      // chrome
      domColumnElementOffsetParent = $columnElement[0].offsetParent;

      // firefox
      if (!angular.element(domColumnElementOffsetParent).hasClass('ui-grid-header-cell-wrapper')) {
        domColumnElementOffsetParent = domColumnElementOffsetParent.offsetParent;
      }
      positionData.parentLeft = domColumnElementOffsetParent.offsetLeft;

      // Get the grid scrollLeft
      positionData.offset = 0;
      if (column.grid.options.offsetLeft) {
        positionData.offset = column.grid.options.offsetLeft;
      }

      positionData.height = gridUtil.elementHeight($columnElement, true);
      positionData.width = gridUtil.elementWidth($columnElement, true);
      
     //If jQuery scrollbar is applied, it will add wrapper div, need to get scrollLeft from childdiv.
      var renderContainerElm = gridUtil.closestElm($columnElement, '.ui-grid-render-container'),
      	childContainerElm =  renderContainerElm.querySelectorAll('.ui-grid-viewport')[0].firstElementChild;
      if(childContainerElm.classList.contains('ui-grid-viewport')) {
          positionData.left = positionData.left - childContainerElm.scrollLeft;
      }
      
      return positionData;
    };

  return $delegate;
}