Query Builder - Control displays as blank for empty query when set as Readonly on load

[KS]

Hello,

When using the Query Builder, if the readOnly flag is set to true, it seems like the control is completely empty, i.e. doesn't show the first And/Or buttons or even an empty row.

Is it possible to make it so that the Query Builder will display like this even when the readOnly flag is set to true upon load?

Thank you,

KS

[YuvanShankar Arunagiri]

Hi KS,

We have checked your reported query and prepared the sample based on your requirement. Using the flag variable, we can show or hide the query builder component. Refer to the below code snippet and sample link.

[app.component.html]:

 <button (click)="toggleDiv()">Toggle Div</button>

    <div *ngIf="isReadOnly">

      <ejs-querybuilder #querybuilder [dataSource]="dataSource">

……

 </ejs-querybuilder>

    </div>

[app.component.ts]:

isReadOnly: boolean = false;

 

    toggleDiv() {

        this.isReadOnly = !this.isReadOnly;

    }

Sample link: https://stackblitz.com/edit/angular-evsmqz?file=src%2Fapp.component.html

If we misunderstood your query, then kindly share more details about your exact query with your tried code snippet or sample. Based on that, we will provide a better and quicker solution.

Regards,

YuvanShankar A