Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overlay Scrollbars + PowerBI + Handsontable #139

Closed
HardRock4Life opened this issue Sep 8, 2019 · 15 comments
Closed

Overlay Scrollbars + PowerBI + Handsontable #139

HardRock4Life opened this issue Sep 8, 2019 · 15 comments

Comments

@HardRock4Life
Copy link

HardRock4Life commented Sep 8, 2019

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
Copy link
Owner

KingSora commented Sep 9, 2019

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
Copy link
Author

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

@KingSora
Copy link
Owner

KingSora commented Sep 9, 2019

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
Copy link
Author

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
Copy link
Author

HardRock4Life commented Sep 10, 2019

"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
Copy link
Owner

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
Copy link
Author

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

@KingSora
Copy link
Owner

@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
Copy link
Author

HardRock4Life commented Sep 13, 2019 via email

@KingSora
Copy link
Owner

KingSora commented Sep 16, 2019

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
Copy link
Author

HardRock4Life commented Sep 16, 2019 via email

@KingSora
Copy link
Owner

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

@HardRock4Life
Copy link
Author

HardRock4Life commented Sep 18, 2019

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

@KingSora
Copy link
Owner

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

@KingSora KingSora closed this as completed Mar 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants