Hide toolbar while is loading

[Rafael]

Hello,

I know that probably my case is very specific, and is not a big problem, so the priority is low here.

I am using a grid with toolbar buttons + querybuilder inside, but when I am loading the page, the grid with query builder load like the mov that I attached inside the zip file.

Would be possible to don't show the elements while the grid is loading? 

Thank you very much.

Attachment: mov_loading_grid_378a43f1.zip

[Sujith Kumar Rajkumar]

Hi Rafael, 

 

Greetings from Syncfusion support. 

 

Based on the provided information, we could understand that your requirement is to initially hide the EJ2 query builder component(rendered on the Grid toolbar) and then display it once the Grid rendering is completed. You can achieve this by setting the initial display CSS style as ‘none’ to the query builder element class(‘.e-query-builder’) and then changing the display back to ‘block’ in the Grid’s dataBound event as demonstrated in the below code snippets, 

 

app.component.css 

.e-query-builder { 

        display: none; 

} 

 

app.component.ts 

import { QueryBuilderComponent } from '@syncfusion/ej2-angular-querybuilder'; 

 

export class AppComponent { 

    @ViewChild('querybuilder') qryBldrObj: QueryBuilderComponent; 

 

    // Grid’s dataBound event handler 

    dataBound() { 

        // This event will be triggered each time the grid data is modified, so flag variable is used so that this case is executed only on Grid initial render 

        if (this.initialFlag) { 

            this.qryBldrObj.element.style.display = "block"; 

        } 

        this.initialFlag = false; 

    } 

} 

 

API link: https://ej2.syncfusion.com/angular/documentation/api/grid/#databound  

 

If we misunderstood your query or if you require any further assistance, then please get back to us. 

 

Regards, 

Sujith R 

[Rafael]

Hi Sujith,

It works! Thank you very very much!

[Sujith Kumar Rajkumar]

Hi Rafael, 

 

You’re welcome. We are glad to hear that the provided solution helped resolve your query. 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R