CODEWITHSUNDEEP
angulartypescriptprimengprimeng-datatable
Mohamed Sabry Abdelmordy
Mohamed Sabry Abdelmordy

Reputation: 1

Treetable Primeng issue using direction RTL

image for example

Treetable Primeng issue using direction RTL when you scroll right and left header not scrolling Can You Help us in github repo Or Online editors Iam know Primeng not support RTL iam adding direction: rtl; on body

Upvotes: 0

Views: 164

Answers (2)

sabry gooda
sabry gooda

Reputation: 1

  ngAfterViewInit(): void {
    setTimeout(() => {
      if (this.isRtl) {
        this.applyStyle();
        const elements = document.getElementsByClassName('p-treetable-scrollable-body');
        if (elements.length > 0) {
          const element = elements[1] as HTMLElement;
          element.addEventListener('scroll', this.onScroll);
        } else {
          console.log('Element not found');
        }
      }

    }, 500);

  }

  applyStyle() {
    if (this.isRtl) {
      setTimeout(() => {
        $(".p-treetable-scrollable-view").css('left', '0px');
        $(".p-treetable-scrollable-header-box").css('padding-right', "0px");
        $(".p-treetable .p-treetable-tbody > tr > td").css('text-align', 
        'unset');
        $("chevronrighticon").css("transform", "rotate(180deg)");
      }, 10);
    }

  }
try this code and it will work with you with out any problem , isolve this issue with this steps

Upvotes: 0

Mohamed Sabry Abdelmordy
Mohamed Sabry Abdelmordy

Reputation: 1

Iam edit on this function with name onBodyScroll(event) and et my selected language from local storage

You can choose an other way by direction value this is path file edit this is file path to edit node_modules/primeng/fesm2022/primeng-treetable.mjs

This is My code use for this sollution in function

onBodyScroll(event) {
        if (this.preventBodyScrollPropagation) {
            this.preventBodyScrollPropagation = false;
            return;
        }
        if (this.scrollHeaderViewChild && this.scrollHeaderViewChild.nativeElement) {
            let lang = JSON.parse(localStorage.getItem('lang'))['code'] || 'en'
            if(lang == 'ar'){
                this.scrollHeaderBoxViewChild.nativeElement.style.marginLeft = 'unset'
                this.scrollHeaderBoxViewChild.nativeElement.style.marginRight = event.target.scrollLeft + 'px';
            }else{
                this.scrollHeaderBoxViewChild.nativeElement.style.marginRight = 'unset'
                this.scrollHeaderBoxViewChild.nativeElement.style.marginLeft = -1 * event.target.scrollLeft + 'px';
            }
        }
        if (this.scrollFooterViewChild && this.scrollFooterViewChild.nativeElement) {
            this.scrollFooterBoxViewChild.nativeElement.style.marginLeft = -1 * event.target.scrollLeft + 'px';
        }
        if (this.frozenSiblingBody) {
            this.frozenSiblingBody.scrollTop = event.target.scrollTop;
        }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>

Upvotes: 0

Related Questions