Disable grid but not the scroll

[Manolo Capdevila]

Hi,

I need disabled the grid, I follow these steps

https://ej2.syncfusion.com/angular/documentation/grid/how-to/enable-disable-grid-and-its-actions/

But it disable the scroll, I need that user can scroll horizontal

Thanks

[Thavasianand Sankaranarayanan]

Hi Manolo,  

 

Greetings from Syncfusion support. 

 

We have analyzed the reported query “Disable grid but not the scroll” at our end. 

 

We have achieved your requirement using manually adding and removing disablegrid class for grid elements. We suggest using the getContentTable and getHeaderTable method to fulfill your need.  

 

Refer the below help documentation. 

 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#getheadertable 

 

Link : https://ej2.syncfusion.com/angular/documentation/api/grid/#getcontenttable 

 

For your request, please refer the below code and sample 

 

[app.component.css] 

 

.disablegrid { 

        pointer-events: none; 

        opacity: 0.4; 

    } 

    .wrapper { 

        cursor: not-allowed; 

    } 

 

[app.component.ts] 

 

 

public btnClick(): void { 

        if (this.Grid.getContentTable().classList.contains('disablegrid')) { 

 

            this.Grid.getContentTable().classList.remove('disablegrid'); 

            this.Grid.getHeaderTable().classList.remove('disablegrid'); 

            document.getElementsByClassName('e-toolbar')[0].classList.remove('disablegrid'); 

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

             

        } else { 

            // To disable the grid table 

            this.Grid.getContentTable().classList.add('disablegrid'); 

            // To disable the grid header 

            this.Grid.getHeaderTable().classList.add('disablegrid'); 

            // To disable the Toolbar  

            document.getElementsByClassName('e-toolbar')[0].classList.add('disablegrid'); 

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

        } 

    } 

 

Sample link: https://stackblitz.com/edit/angular-z25rt9-eiechk?file=app.component.ts 

 

Please check the documentation/sample link and get back to us, if you require any further assistance on this. 

 

Regards, 

 

Thavasianand S. 

[Manolo Capdevila]

Ok, Thanks

But, it is possible, in future, that your grid has the property disabled and do it automatically?

[Thavasianand Sankaranarayanan]

Hi Manolo, 

By default, we can disable the complete Grid by using that single CSS which we can used in our documentation but based on your query we found that you want to disable, except scrollbars in Grid. So, for your case we need to do customization in CSS and also we can achieve this by using the CSS style alone. 

[app.component.css] 

.e-grid table, .e-grid .e-toolbar { 

            opacity: 0.4; 

            pointer-events: none; 

        } 

We have modified the previously provided sample in the following link. 

Link: https://stackblitz.com/edit/angular-z25rt9-p3vqh6?file=app.component.ts 

Regards, 

Thavasianand S.