1. Home
  2. Forum
  3. Angular - EJ 2
  4. How to compare to another column

How to compare to another column

How can we compare against another column?

For example if we had two date columns, how could we setup something to check if a date in one columns is greater than the date in another column.
Same thing for other types ie if a number in one column is greater than the number in another column.

We'd still need the getSqlFromRules and setRulesFromSql to work.

Thanks,
Chris

5 Replies 1 reply marked as answer
AS Aravinthan Seetharaman Syncfusion Team May 5, 2021 03:27 AM UTC

 
Thanks for contacting Syncfusion Support. 
 
We have checked your requirement query. We can achieve your requirement by using Dropdown list as value Template in QueryBuilder. In this value template we are given QueryBuilder column values as datasource. Now you can generate Sql query to compare two columns. Please refer the below code snippet and sample. 
 
app.component.html 
 
<div class="col-lg-8 control-section"> 
    <ejs-querybuilder id="querybuilder" #querybuilder cssClass="row" [dataSource]="dataSource" [columns]="filter" 
      width="100%" (ruleChange)="updateRule($event)" (created)="change()"> 
    </ejs-querybuilder> 
  </div> 
 
 
app.component.ts 
 
import { Component, ViewChild, ViewEncapsulation } from "@angular/core"; 
import { RadioButtonComponent } from "@syncfusion/ej2-angular-buttons"; 
import { 
  QueryBuilderComponent, 
  TemplateColumn, 
  ColumnsModel, 
  RuleChangeEventArgs 
} from "@syncfusion/ej2-angular-querybuilder"; 
import { getComponent, createElement } from "@syncfusion/ej2-base"; 
import { DropDownList } from "@syncfusion/ej2-dropdowns"; 
import { expenseData } from "./data-source"; 
 
@Component({ 
  selector: "app-root", 
  templateUrl: "app.component.html", 
  styleUrls: ["app.component.css"], 
  encapsulation: ViewEncapsulation.None 
}) 
export class AppComponent { 
  @ViewChild("querybuilder") qryBldrObj: QueryBuilderComponent; 
  @ViewChild("radio") radioButton: RadioButtonComponent; 
  dataSource: Object[] = expenseData; 
 
  incomeTemplate: TemplateColumn = { 
    create: () => { 
      return createElement("input", { attrs: { type: "text" } }); 
    }, 
    destroy: (args: { elementId: string }) => { 
      let dropdown: DropDownList = getComponent( 
        document.getElementById(args.elementId), 
        "dropdownlist" 
      ) as DropDownList; 
      if (dropdown) { 
        dropdown.destroy(); 
      } 
    }, 
    write: (args: { 
      elements: Element; 
      values: string[] | string; 
      operator: string; 
    }) => { 
      let column: string[] = []; 
      for (let x in this.filter) column.push(this.filter[x].field); 
      let dropDownObj: DropDownList = new DropDownList({ 
        dataSource: column, 
        value: args.values as string, 
        change: (e: any) => { 
          this.qryBldrObj.notifyChange(e.itemData.value, e.element); 
        } 
      }); 
      dropDownObj.appendTo("#" + args.elements.id); 
    } 
  }; 
 
  incomeOperators = [ 
    { key: "Equal", value: "equal" }, 
    { key: "Not equal", value: "notequal" }, 
    { key: "Greater than", value: "greaterthan" }, 
    { key: "Less than", value: "lessthan" }, 
    { key: "Less than or equal", value: "lessthanorequal" }, 
    { key: "Greater than or equal", value: "greaterthanorequal" } 
  ]; 
 
  filter: ColumnsModel[] = [ 
    { 
      field: "Expense", 
      label: "Expense", 
      type: "number" 
    }, 
    { 
      field: "Income", 
      label: "Income", 
      type: "number", 
      operators: this.incomeOperators, 
      template: this.incomeTemplate 
    }, 
    { field: "Description", label: "Description", type: "string" } 
  ]; 
  displayRule: any = ""; 
 
  updateRule(args: RuleChangeEventArgs): void { 
    if (this.radioButton.checked) { 
      this.displayRule = this.qryBldrObj.getSqlFromRules(args.rule); 
    } else { 
      this.displayRule = JSON.stringify(args.rule, null, 4); 
    } 
  } 
  change(): void { 
    this.updateRule({ 
      rule: this.qryBldrObj.getValidRules(this.qryBldrObj.rule) 
    }); 
  } 
  setRule(): void { 
    this.qryBldrObj.setRulesFromSql("Income > 'Expense'"); 
    this.change(); 
  } 
} 
 
 
 
Could you please check whether the given details are fulfilling your requirement or If we misunderstood your requirement, please share more details. So that we can work on this and provide you a better solution quickly. 
 
Regards, 
Aravinthan S 


Marked as answer
CP Chris Persichetti May 6, 2021 12:50 AM UTC

Yes thank you.  I believe that is mostly what we are looking for.

Thanks!

Chris

AS Aravinthan Seetharaman Syncfusion Team May 6, 2021 05:19 AM UTC

Hi Chris, 
 
Thanks for the update. 
 
We are happy to hear that your requirement has been achieved. Please feel free to contact us if you need any further assistance on this. 
 
Regards, 
Aravinthan S 


CP Chris Persichetti May 11, 2021 09:32 PM UTC

Hi,
On this piece of code:
this.qryBldrObj.setRulesFromSql("Income > 'Expense'");

Anyway to get it to work with using ("Income > Expense");
without the single quote?  Otherwise will be difficult for use to know where to add single quotes to our SQL when passing the SQL back to the query builder at a later time.

Thanks,
Chris



AS Aravinthan Seetharaman Syncfusion Team May 12, 2021 04:37 PM UTC

Hi Chris, 
 
We have checked your query. Based on this single quote, we are differentiating the number and string type values in QueryBuilder. And we suggest you to give string values within single quote only.  
 
Please let me know if you have any concern on this. 
 
Regards, 
Aravinthan S  


Loader.
Up arrow icon