Questions about Query Builder field editor customization

[KS]

Hello,

After playing with the QueryBuilder demos, I have a few questions about how much customization it supports.

1. Can we categorize columns that appear in the field dropdown? That is to say, can we have a section of General fields (ID, Name, etc) and then a section of Advanced ones (CreatedDate, ModifiedBy, etc)?
   
2. Additionally, is there a way to support searching through the fields in the dropdown, especially if we have a large collection of columns?
3. And finally, when using hierarchies, are we able to customize the way the field names are exported into the SQL format, or are they always exported as Parent.Child names?

[Gayathri KarunaiAnandam]

Hi KS, 

We have checked your reported query.  

Query: Can we categorize columns that appear in the field dropdown? That is to say, can we have a section of General fields (ID, Name, etc) and then a section of Advanced ones (CreatedDate, ModifiedBy, etc)? 

We have checked your reported query. We need to validate more on this requirement. We will update further details on November 8^th,2021. 

Query: Additionally, is there a way to support searching through the fields in the dropdown, especially if we have a large collection of columns? 

We have checked your reported query. We can enable searching in dropdown by using the allowFiltering property by using the fieldModel property. Please check the code snippet. 

 <ejs-querybuilder #querybuilder [dataSource]="dataSource" [rule]="importRules" [columns]="filter" [fieldMode]="fieldMode" [separator]="separator" [fieldModel]="fieldModel"> 

  </ejs-querybuilder> 

  fieldModel: DropDownListModel = { allowFiltering: true }; 

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

Query :  are we able to customize the way the field names are exported into the SQL format, or are they always exported as Parent.Child names 

We would like to let you know that it is our behavior that we have only exported the SQL for complex databinding as Parent.Child. 

Please get back to us, if you need further assistance. 

Regards, 

Gayathri K 

[Gayathri KarunaiAnandam]

Hi KS, 

We have checked your reported query. 

Query: Can we categorize columns that appear in the field dropdown?  

We can checked your reported query. We can achieve your requirement by using the category property in Querybuilder. Please check the below code snippet. 

Code snippet: 

 <e-column field="EmployeeID" label="Employee ID" type="number" category="Advanced one"></e-column> 

      <e-column field="FirstName" label="First Name" type="string"></e-column> 

      <e-column 

        field="TitleOfCourtesy" 

        label="Title Of Courtesy" 

        type="boolean" 

        [values]="values" 

      ></e-column> 

      <e-column field="Title" label="Title" type="string"></e-column> 

      <e-column 

        field="HireDate" 

        label="Hire Date" 

        type="date" 

        format="dd/MM/yyyy" 

      ></e-column> 

      <e-column 

        field="Country" 

        label="Country" 

        type="string" 

        category="Landmark" 

      ></e-column> 

      <e-column 

        field="Country" 

        label="City" 

        type="string" 

        category="Landmark" 

      ></e-column> 

For your reference, we have prepared a sample based on your requirement. Please check the below sample link. 

Sample: https://stackblitz.com/edit/angular-cxjmvw?file=app.component.html 

API: https://ej2.syncfusion.com/angular/documentation/api/query-builder/columnsModel/#category 

Please check and get back to us, if you need further assistance. 

Regards, 

Gayathri K 

[KS]

Hello,

Thank you for your helpful answers.

I do have a followup - in the example you provided for the categories, the categories seem to not be able to be expanded and collapsed, is this the case? We currently have groups that have dozens of fields, so having them all be displayed at the same time like that would make it difficult to scroll through.

This is what we currently have that we want to bring to the web, with fields grouped under different categories, and some nested categories as well:

Is it possible to have columns grouped like this under categories that can be displayed in this manner? That is, in groups that don't all appear within the field editor so the user has to scroll through the whole list?

Thank you,

KS

[Aravinthan Seetharaman]

Hi KS, 

 

We have checked your requirement query. We need to validate more on this, and need to ensure more case regarding this. So, we will update further details on 16^th November 2021. We appreciate your patience until then. 

 

Regards, 

Aravinthan S 

[Gayathri KarunaiAnandam]

Hi KS, 

We have validated your reported query. We can achieve your requirement by using the RuleTemplate of Querybuilder. We have used context menu component to achieve your requirement. Please check the below code snippet. 

Code: 

<ejs-querybuilder 

  id="querybuilder" 

  #querybuilder 

  width="70%" 

  created="created()" 

  [dataSource]="data" 

> 

  <e-columns> 

    <ng-template #ruleTemplate let-data> 

      <div class="e-rule e-rule-template"> 

        <div class="e-rule-filter e-custom-filter"> 

          <ejs-contextmenu 

            id="contextmenu" 

            [items]="menuItems" 

            (select)="fieldChange($event)" 

          ></ejs-contextmenu> 

          <!-- To Render Button. --> 

          <button id="btn" ejs-button (click)="btnClick()"> 

            Open ContextMenu 

          </button> 

        </div> 

         

      </div> 

    </ng-template> 

  </e-columns> 

</ejs-querybuilder> 

For you reference, please check the below code snippet. 

Sample: https://stackblitz.com/edit/angular-9vr8dh-bvirpa?file=app.component.ts  

Please check and get back to us, If you need further assistance. 

Regards, 

Gayathri K 

 

[KS]

Hello,

Thank you for your response and your example.

When trying out the given sample, it seems like even though the context menu does appear as I would like it to, whenever I select a field value or try to change the operation/value, it flickers and resets the values, and does not work. I am not sure if this is intentional or if the button being in place of the dropdown is causing issues.

Is this expected? From what I can tell, that sample project looks good, but I am not able to build any queries with it.

Thank you,

KS

[Gayathri KarunaiAnandam]

Hi KS, 

We have checked your reported query. We need to validate more on this. So, we will update you the further details within November 26^th, 2021. We appreciate your patience until then. 

Regards, 

Gayathri K 

[Gayathri KarunaiAnandam]

Hi KS, 

Thanks for the patience. 

We have validated your query. We have prepared a sample in which the field items are opened by right clicking the div element. We have logged the sql rule of Querybuilder in Button click. Please check the below sample. 

Code: 

 

<ng-template #ruleTemplate let-data> 

        <div class="e-rule e-rule-template"> 

          <div class="e-rule-filter e-custom-filter"> 

            <div id="contextmenutarget">{{content}}</div> 

            <ejs-contextmenu 

              id="contextmenu" 

              target="#contextmenutarget" 

              [items]="menuItems" 

              (select)="fieldChange($event)" 

            ></ejs-contextmenu> 

          </div> 

          <div class="e-rule-operator e-operator"> 

            <ejs-dropdownlist 

              (change)="operatorChange($event)" 

              [fields]="fields" 

              [dataSource]="operator" 

              [value]="data.rule.operator" 

            > 

            </ejs-dropdownlist> 

          </div> 

For your reference, please check the below sample link. 

Sample: https://stackblitz.com/edit/angular-9vr8dh-ehma6t?file=template-driven.html 

Please check and get back to us, if you need further assistance. 

Regards, 

Gayathri K 

[KS]

Hello,

Thank you for the updated sample.

I have tried it out with multiple conditions, and when I select a different field for the second condition, the operations and values reset, and all of the field names change to the newly selected field. When this happens, the sql output is also not correct.

Is this expected behavior? It seems like all of the other conditions getting changed should not be occurring.

Thank you,

KS

[Gayathri KarunaiAnandam]

Hi KS, 

We have checked your reported query. We have used Menu component to achieve your requirement. Please check the code snippet and video demonstration. 

[HTML]: 

<ng-template #ruleTemplate let-data> 

        <div class="e-rule e-rule-template"> 

          <div class="e-rule-filter e-custom-filter"> 

            <div class="e-text-menu-input" id="{{data.ruleID}}_inputId"></div> 

            <ejs-menu 

              [items]="menuItems" 

              class="e-field-context" 

              [fields]="menuFields" 

              id="{{data.ruleID}}_menuId" 

              (select)="fieldChange($event ,data.ruleID)" 

            ></ejs-menu> 

          </div> 

          <div class="e-rule-operator e-operator"> 

            <ejs-dropdownlist 

              (change)="operatorChange($event)" 

              [fields]="fields" 

              [dataSource]="operator" 

              [value]="data.rule.operator" 

            > 

            </ejs-dropdownlist> 

          </div> 

          <div> 

            <div class="e-slider-value"> 

              <ejs-slider 

                [ticks]="rangeticks" 

                min="30" 

                max="50" 

                id="{{data.ruleID}}_valuekey0" 

                (change)="valueChange($event, data.ruleID)" 

                (created)="sliderCreated(data.ruleID)" 

                [value]="data.rule.value" 

              > 

              </ejs-slider> 

            </div> 

            <div class="e-rule-btn"> 

              <button 

                class="e-removerule e-rule-delete e-css e-btn e-small e-round" 

              > 

                <span class="e-btn-icon e-icons e-delete-icon"></span> 

              </button> 

            </div> 

          </div> 

        </div> 

      </ng-template> 

fieldChange(args: any, id): void { 

    var element = document 

      .getElementById(id) 

      .querySelector('.e-text-menu-input'); 

    if (args.item.text != '') { 

      this.qryBldrObj.notifyChange(args.item.text, element, 'field'); 

    } 

  } 

  operatorChange(e: any): void { 

    if (!e.isInteracted) { 

      return; 

    } 

    this.qryBldrObj.notifyChange(e.value, e.element, 'operator'); 

  } 

 

  valueChange(e: any, ruleID: string): void { 

    if (e.isInteracted) { 

      let elem: HTMLElement = document.getElementById(ruleID); 

      this.qryBldrObj.notifyChange(e.value as Date, elem, 'value'); 

    } 

  } 

 

For your reference, please check the below sample link. 

Sample: https://stackblitz.com/edit/angular-9vr8dh-psnmug?file=app.component.ts 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/qb_rele_temp1204527458 

Please get back to us, if you need further assistance. 

Regards, 

Gayathri K 

[KS]

Hello,

Thank you again for your sample.

This functionality is what we wanted to capture, and I appreciate all of your help. But the one thing that would help us is to be able to see which field is selected for each condition once the user selects it from the context menu. Is that possible with this latest sample you have provided?

Thank you,

KS

[Thaneegairaj Sankar]

Hi KS,

Thanks for the update.

We have checked your reported requirement and we can be able to achieve this in sample level, please find the below code snippets

fieldChange(args: any, id): void {

    var element = document

      .getElementById(id)

      .querySelector('.e-text-menu-input');

    if (args.item.text != '') {

      console.log(args.item.text);  // here we get the selected field name

      this.qryBldrObj.notifyChange(args.item.text, element, 'field');

    }

  }

For your reference we have prepared a sample,

Sample link: https://stackblitz.com/edit/angular-9vr8dh-latjvs?file=app.component.ts

Please get back to us, if you need any further assistance on this.

Regards,

Thaneegairaj S