Overlay Scrollbars + PowerBI + Handsontable

[HardRock4Life]

Hello, Rene!

Thank you for developing your solution, it is very promising in the light of a cross-browser styling issues. I opened this topic for a following situation - there's a task to implement a cross-browser scrollbar into the Handsontable (HOT) visual, which is used inside a Power BI. I decided to use your technology, because I believe it is the one that would help me completing the task.

The problem is, I cannot understand how to properly apply your scrollbar inside the visual - I've imported it into the visual.ts and tried to find a native scrollbar among the HTML classes, but so far there was no success. In my opinion, there's should be added something into CSS file.

If you don't mind, I would love to try to find this solution together. Looking forward hearing from you soon!

[KingSora]

Good day!

I haven't worked with the mentioned libraries until now, but I think its possible. Can you set up a small sample project on stackblitz or codesandbox? This makes it much easier for me to help you, since I can directly fix your problem.

Thanks!

[HardRock4Life]

Alright, I can do it, but only in the evening. When do you plan to be online tomorrow? What is your time zone?

[KingSora]

I'm living in Austria, so my timezone is UTC +2 but I don't know exactly when I'll have time. I've taken a look on the Handsontable library, and I think it would require additional features to make it work with OverlayScrollbars or any other scrollbar plugin.

I'll open a detailed issue on their github project, maybe they are willing to implement this feature(s) so you can basically apply any scrollbar plugin.

[HardRock4Life]

It's the first time i'm working with Stackblitz, here's the project I've tried to create https://stackblitz.com/edit/typescript-pj8wnw

But something tells me, you will see only a default piece of code. Same happens on my side, when I try to open the project following the shared URL. Should I upload it to GitHub, so it would had worked approprietly?

[HardRock4Life]

"use strict";
import powerbi from "powerbi-visuals-api";
import DataViewObjects = powerbi.DataViewObjects;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import IVisualHost = powerbi.extensibility.visual.IVisualHost;
import { VisualSettings } from "settings";
import Handsontable from "handsontable";
import "overlayscrollbars";
import 'handsontable/dist/handsontable.full.css';
import 'handsontable/languages/en-EN';
import Menu = Handsontable.plugins.Menu;
import OverlayScrollbars from "overlayscrollbars";

var dataObject: any;
let filtr:boolean=false;

export class Visual implements IVisual {
  private settings: VisualSettings;
  private host: IVisualHost;
  private readonly MainTableElementId: string = "main_table";
  private _container: HTMLElement;
  private selectionManager: powerbi.extensibility.ISelectionManager;
  private hot: Handsontable;
  private overlayScrollbar: OverlayScrollbars;

  constructor(options: VisualConstructorOptions) {
    this.host = options.host;
    this.selectionManager = options.host.createSelectionManager();
    this._container = options.element;

    this._container.innerHTML = `
        <div class="tabs"> 
        <section id="1">                
        </section>    
        </div>`;

    var hotElement = document.getElementById('1');
    var hotSettings: Handsontable.GridSettings = {
      filters: true,
      dropdownMenu: [
        'filter_by_condition',
        'filter_by_value',
        'filter_action_bar'
      ],
      width: '100%',
      columnSorting: true,
      language: 'ru-RU',
      readOnly: true,
      manualColumnResize: false 
    };

    this.hot = new Handsontable(hotElement, hotSettings);
    // this.hot.render();
    const self = this; 
    Handsontable.hooks.add('modifyColWidth', function (width: any) {
      if (this === (self.hot.getPlugin('dropdownMenu').menu as Menu).hotMenu) {
        return 50;  
      }
      return width;
    });

    //console.log(this.overlayScrollbar.options);
    // var div = document.createElement('div');
    // div.style.overflowY = 'scroll';
    // div.style.width = '300px';
    // div.style.height = '300px';
    // div.style.backgroundColor = 'red';

    // document.body.appendChild(div);
    // let scrollWidth = div.offsetWidth - div.clientWidth;

    // div.remove();

    // console.log(scrollWidth);
  }

  public update(options: VisualUpdateOptions) {

    this.hot.updateSettings({

    });
  }

  public updateObjects(objects: DataViewObjects) {  }

  /**
   * This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
   * objects and properties you want to expose to the users in the property pane.
   *
   */
 //public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {  }

  /**
   * Destroy runs when the visual is removed. Any cleanup that the visual needs to
   * do should be done here.
   *
   * @function
   */
  public destroy(): void {
    //Perform any cleanup tasks here
  }
}

This is the current code for now. I'll try to launch the code in the stackblitz, though it's a bit challenging for me now. If you need something else, just let me know.

[KingSora]

Thanks!

We will need to wait until someone from Handsontable takes care of my issue because it needs new features before it can work with OverlayScrollbars.

[HardRock4Life]

Do I get it right, that you want to change the viewport HTMLElement overwrite the scroll positions?

[HardRock4Life]

I've collected some links from similar issues that were before

handsontable/handsontable#1120
https://github.com/handsontable/handsontable/blob/v0.10.0-beta2/demo/scroll_native.html
handsontable/handsontable#272
handsontable/handsontable#2123
https://stackoverflow.com/questions/24115396/deactivate-the-scrollbars-in-handsontable
https://forum.handsontable.com/t/implementing-a-cross-browser-external-scrollbar/3568
https://forum.handsontable.com/t/is-there-a-way-to-reference-current-viewport-and-select-its-last-column-cell-programatically/1564/2

[KingSora]

@HardRock4Life yes you get it right, the intention is to make it possible to define an alternative element as viewport, so the OverlayScrollbars viewport can be also the handsontable viewport.

[HardRock4Life]

Hello, Rene! I've seen the answer they've sent to you. What if we try to cooperate with them and find a solution for our issue by contributing their code? Do they have ideas, where changes for an upgrade can be made?

[KingSora]

Thats definitely possible, but their codebase is huge and I don't know whether I have the time to fully understand and contribute correctly to it. I think is better to wait for them, but I'll ask them whether they can give me guidance.

[HardRock4Life]

2 months is too long...

[KingSora]

Well, I'll do my best to solve this as quickly as possible.

[HardRock4Life]

I've got some thoughts on workarounds. Is it possible to set up a meeting via Skype on a weekend?

[KingSora]

@HardRock4Life unfortunately I got injured last week and I don't have the head for this right now. I'm sorry!

[KingSora]

Related: #639