import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter, ViewChild, AfterViewInit, ElementRef, ViewEncapsulation } from '@angular/core';
import { ContentScrollEvent, GridComponent } from '@progress/kendo-angular-grid';
import { IElementRef } from './IElementRef';

@Component({
    selector: 'app-my-data-grid',
    template: `<kendo-grid [data]="data"></kendo-grid>`,
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        app-my-data-grid .hide-scrollbar > * {
            margin-right: -7px;
        }
    `]
})
export class MyDataGridComponent implements AfterViewInit, IElementRef {
    @Input() data: any[];
    @Input() hideScrollbar: boolean = true;
    @Output() contentScroll: EventEmitter<ContentScrollEvent>; //The event we'll listen to
    @ViewChild(GridComponent, { static: true }) gridEl: GridComponent; //Our actual kendo grid reference
    public element: Element; //Part of IElementRef, so the sync functions have something to reference

    constructor(elRef: ElementRef) {
        this.element = elRef.nativeElement;
    }

    ngAfterViewInit(): void {
        this.contentScroll = this.gridEl.contentScroll; //use the kendo grid's native scroll event
    }
    // your logic ...
}