Horizontal Scroll bar with Grid disabled

[PDev]

Hi 

If grid is disabled then horizontal scroll does not work. Following is my css and code which i use to disable treegrid

.disabletreegrid {

pointer-events: none;

opacity: 0.4;

}

.wrapper {

cursor: not-allowed;

}

enableTreegrid(){

this.treegrid.element.classList.remove('disabletreegrid');

(document.getElementById("TreeGridParent") as HTMLElement).classList.remove('wrapper');

}

disableTreegrid(){

this.treegrid.element.classList.add('disabletreegrid');(document.getElementById("TreeGridParent") as HTMLElement).classList.add('wrapper');

}

[Pon Selva Jeganathan]

Hi PDev,    

   

Thanks for contacting syncfusion forum.  

  

Query: Horizontal Scroll bar with Grid disabled

We have checked your query and when we disable the TreeGrid, scroller bind in the TreeGrid will also get disabled because Scroller is also part of the TreeGrid element. So that  Scroller also get disabled which is the behavior.

So share us the purpose of disabling the Scrollbar alone/ share us the detail explanation of your requirement. Based on your provided details we will assist you further.

  

Regards,  

Pon selva   

[PDev]

my requirement is based on certain condition i want to make grid disable but due to number of columns in grid. i still want it to be scrollable. 

but in this case when i make it disable even horizontal scroll is disabled

[Pon Selva Jeganathan]

Hi PDev,    

   

Thanks for the update.  

  

Query: Horizontal Scroll bar with Grid disabled

We have achieved your requirement by manually adding and removing disabletreegrid class for tree grid elements in button click event. In the sample below, we have added the disabletreegrid class for content and header table using getContenttable and getHeaderTable method. Please refer to the below code snippet. 

    

[app.component.css]  

.disabletreegrid { 

  pointer-events: none; 

  opacity: 0.4; 

} 

.wrapper { 

  cursor: not-allowed; 

} 

 

[app.component.ts]  

 

 <button ejs-button (click)="btnClick()" cssClass="e-flat"> 

      Enable Grid 

    </button> 

    <button ejs-button (click)="btnClick1()" cssClass="e-flat"> 

      Disable Grid 

    </button> 

public btnClick(): void { 

    this.treegrid.getContentTable().classList.remove('disabletreegrid'); 

    this.treegrid.getHeaderTable().classList.remove('disabletreegrid'); 

    document 

      .getElementsByClassName('e-toolbar')[0] 

      .classList.remove('disabletreegrid'); 

    document.getElementById('TreeGridParent').classList.remove('wrapper'); 

  } 

  public btnClick1(): void { 

    // To disable the treegrid table 

    this.treegrid.getContentTable().classList.add('disabletreegrid'); 

    // To disable the treegrid header 

    this.treegrid.getHeaderTable().classList.add('disabletreegrid'); 

    // To disable the Toolbar 

    document 

      .getElementsByClassName('e-toolbar')[0] 

      .classList.add('disabletreegrid'); 

    // document.getElementById('TreeGridParent').classList.add('disabletreegrid'); 

    document.getElementById('TreeGridParent').classList.add('wrapper'); 

  } 

 

 

  

Sample link: https://stackblitz.com/edit/angular-batch-edit-8qzdyy?file=app.component.ts 

 

Please refer to the below API documentation, 

https://stackblitz.com/edit/angular-batch-edit-8qzdyy?file=app.component.ts 

https://ej2.syncfusion.com/documentation/api/treegrid/#getheadertable 

  

Kindly get back to us for further assistance. 

  

Regards,  

Pon selva