Compare to other column

Question

Similar question to https://www.syncfusion.com/forums/165008/how-to-compare-to-another-column but in React.

Also is there a possibility to add a dropdown between the column selector and the operator selector that allows the selection between setting a value (normal use) or comparing to other columns?

The use case is that numerical columns can be compared between them while maintaining the option of comparing with a defined number.

Thanks!

Sangeetha Priya Murugan · Accepted Answer

Hi GUU, 
 
We have checked your reported query and we cannot be able to replicate the issue in our end. 
 
We suspect that the reported problem “str.match is not a function” occurs only if duplicate packages are installed in ‘@syncfusion’ folder of ‘node_modules’ in your application. If you are facing the error “Getting error of no matching version found” like this, we suggest you to define ‘*’ instead of defining package version.  So please follow the steps provided below to resolve this,   
 
·     Delete package.lock.json file from your application.   
·     Remove the @syncfusion package folder from the node_modules. 
·     Use same version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.   
·     Then install the NPM packages.   
            




Package.json  
  
"dependencies": {   
    "@syncfusion/ej2-angular-navigations ": "*",  
    "@syncfusion/ej2-base": "*",  
    "@syncfusion/ej2-data": "*",  
     .  .  .  .  .  .  .  .  
     .  .  .  .  .  .  .  .  
  }  
  
 
Documentation link: https://ej2.syncfusion.com/react/documentation/common/how-to/update-npm-package/   
 
Could you please check the above documentation and get back to us if you need any further assistance on this?   
 
Regards, 
Sangeetha M

Sangeetha Priya Murugan · Answer

Hi GUU,

Your requirement can be achievable in our QueryBuilder by using the template property. For your convenience, we have prepared the sample in react. Please find the link below.

this.filter = [

{

field: 'Expense',

label: 'Expense',

type: 'number',

},

{

field: 'Income',

label: 'Income',

type: 'string',

template: {

create: () => {

this.elem = document.createElement('input');

this.elem.setAttribute('type', 'text');

return this.elem;

},

destroy: (args) => {

this.dropDownObj = getComponent(

document.getElementById(args.elementId),

'dropdownlist'

);

if (this.dropDownObj) {

this.dropDownObj.destroy();

}

},

write: (args) => {

let column = [];

for (let x in this.filter) column.push(this.filter[x].field);

let dropDownObj = new DropDownList({

dataSource: column,

value: args.values,

change: (e) => {

this.qryBldrObj.notifyChange(e.itemData.value, e.element);

},

});

dropDownObj.appendTo('#' + args.elements.id);

},

operators: [

{ 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' },

],

},

{ field: 'Description', label: 'Description', type: 'string' },

];

}

updateRule(args) {

this.txtAreaElem = document.getElementById('ruleContent');

if (this.radioButton.checked) {

this.txtAreaElem.value = this.qryBldrObj.getSqlFromRules(args.rule);

} else {

this.txtAreaElem.value = JSON.stringify(args.rule, null, 4);

}

<QueryBuilderComponent

dataSource={expenseData}

columns={this.filter}

width="100%"

rule={this.importRules}

ref={(scope) => {

this.qryBldrObj = scope;

}}

created={this.onCreated.bind(this)}

ruleChange={this.updateRule.bind(this)}

></QueryBuilderComponent>

Sample Link : https://stackblitz.com/edit/react-bccxcf?file=index.js

Meanwhile, you can render the dropdownlist based on your need by using the rule template property. For more details regarding the rule template. Pelase refer the below links.

https://ej2.syncfusion.com/react/demos/#/bootstrap5/query-builder/rule-template

https://ej2.syncfusion.com/react/documentation/query-builder/templates/#rule-template

Could you please check the above details and get back to us, if you need any further assistance on this?

Regards,

Sangeetha M

GUU · Answer

Hi,Thanks for the swift response.I am trying the rule template method but I am getting an error that seems very obscure. All my tests have pointed out that this has nothing to do with the template class but what happens between changing the value of the column to one that has a template.The log stops after the actionBegin method. What can I log is the following:{    "requestType": "template-initialize",    "ruleID": "querybuilder_group1_rule0",    "action": "field",    "fields": {        "text": "label",        "value": "field"    },    "rule": {        "condition": "and",        "rules": [],        "field": "waitlist_count",        "label": "Waitlist Count",        "type": "number",        "value": 0,        "operator": "equal"    },    "name": "actionBegin"}The error is:Uncaught TypeError: str.match is not a function    at evalExp (template.js:83:1)    at compile (template.js:63:1)    at Object.Engine.compile (template-engine.js:155:1)    at compile (template-engine.js:28:1)    at QueryBuilderComponent.QueryBuilder.templateParser (query-builder.js:3330:1)    at QueryBuilderComponent.QueryBuilder.appendRuleElem (query-builder.js:563:1)    at QueryBuilderComponent.QueryBuilder.templateChange (query-builder.js:1219:1)    at QueryBuilderComponent.QueryBuilder.changeField (query-builder.js:1382:1)    at Observer.notify (observer.js:101:1)    at DropDownList.Base.trigger (base.js:190:1)    at DropDownList.detachChangeEvent (drop-down-list.js:1173:1)    at DropDownList.onChangeEvent (drop-down-list.js:1109:1)    at DropDownList.setSelectOptions (drop-down-list.js:1023:1)    at Observer.<anonymous> (drop-down-list.js:930:1)    at Observer.notify (observer.js:86:1)    at DropDownList.Base.trigger (base.js:190:1)    at DropDownList.updateSelectedItem (drop-down-list.js:923:1)    at DropDownList.setSelection (drop-down-list.js:999:1)    at DropDownList.onMouseClick (drop-down-list.js:549:1)Please could you let me know if this is a known issue, or maybe a working sample would help.