Customize Query Builder (Drop down options for building conditions)

[Bhargava]

can you tell me how to customize query build controls like for an instance i would like to use other values in the drop down and can you also tell how fire an event clicked on these.

[Vinoth Kumar Sundara Moorthy]

Hi Bhargava, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported requirement and we would like to let you know that, we have option for localize the text for the QueryBuilder dropdown options. Please refer the below link for more details regarding the localization support in QueryBuilder. 

 

https://ej2.syncfusion.com/angular/documentation/query-builder/global-local/ 

 

Meanwhile, we have template support for customizing the QueryBuilder component. For more details regarding this support. Please refer the below link. 

 

https://ej2.syncfusion.com/angular/demos/#/material/query-builder/template 

 

Before that we would like to let you know the following details to proceed further. 

 

1. Please provide the detailed use case scenario of your requirement for customizing the QueryBuilder component. 

 

2. Share the operation details that you need to be perform after customizing options in the Dropdown. 

 

Could you please check the above details and get back to us with the above requested information? Based on that we will check and provide you a better solution quickly. 

 

Regards, 

Vinoth Kumar S 

[Bhargava]

            "columnID": 5,

"columnType": "text",

"field": "AssignmentDate",

"title": "Assignment Date",

"width": "170",

"hidden": true,

"resizable": true,

"reorderable": true,

"columnMenu": true,

"filter": true,

"minLength": "",

"maxLength": "",

"required": false

this is my JSON format as you can see here "COLUMN TYPE" and "TITLE", each object has different type and title how can I use this format to render in query builder angular 7.

so far I have tried in this

can you help me with this?

<ejs-querybuilder #querybuilder class="row mx-0" [dataSource]="dataSource" [showButtons]="showButtons"

[rule]="importRules" (created)="createdControl()">

<e-columns>

<ng-template #template ngFor let-column [ngForOf]="Columns">

<e-column [field]="column.field" [label]="column.title" [type]="column.ColumnType">

e-column>

ng-template>

e-columns>

ejs-querybuilder>

and this

<ejs-querybuilder #querybuilder class="row mx-0" [dataSource]="columns">

ejs-querybuilder>

and when I tried to render data from the JSON using the subscribe method from the TS file. Their it is showing "No Records"

ts file

this.fetchData.getUserContentProgress().subscribe(data => {

debugger;

this.userContent_ParentGridColumns = data['GridParentColumns'];

console.log(this.userContent_ParentGridColumns);

})

html file

<ejs-querybuilder #querybuilder class="row mx-0" [dataSource]="userContent_ParentGridColumns ">

ejs-querybuilder>

is this the correct way?

[Vinoth Kumar Sundara Moorthy]

Hi Bhargava, 

 

Good day to you. 

 

Query 1: Column binding with ng-template. 

 

We have checked your reported requirement and we would like to let you know that it can be achievable in QueryBuilder. For your convenience, we have prepared the sample based on your provided code example. Please find the link below. 

 

https://stackblitz.com/edit/angular-w1ag3w?file=app.component.ts 

 

Query 2: when I tried to render data from the JSON using the subscribe method from the TS file. Their it is showing "No Records". 

 

We have checked your reported issue and we are not able to reproduce it in our end. So please provide the following details to proceed further. 

 

1. Confirm whether the subscribe method retrieves value properly in the userContent_ParentGridColumns variable. 

 

2. No record found issue occurs in QueryBuilder dropdown or Grid? 

 

3. Please share the code snipper. If possible replicate your issue in the above sample and update. 

 

For further details, regarding the subscribe method for data retrieving please check the below links. 

https://stackoverflow.com/questions/39295854/angular-2-how-to-return-data-from-subscribe 

 

https://stackoverflow.com/questions/52081121/angular-6-observables-extract-data-from-subscribe-function-and-use-it-elsew/52081313 

 

Could you please check the above details and get back to us with the above requested information? Based on that we will check and provide you a better solution quickly. 

 

Regards, 

Vinoth Kumar S