QueryBuilderComponent

23 Sep 202516 minutes to read

Represents the EJ2 Angular QueryBuilder Component.

<ejs-querybuilder></ejs-querybuilder>

Properties

addRuleToNewGroups boolean

Specifies a boolean value whether enable / disable the new rule adding while adding new groups.

Defaults to true

allowDragAndDrop boolean

Specifies a boolean value whether to enable / disable the drag and drop support to move the rules/ groups.

Defaults to false

allowValidation boolean

Enables or disables the validation.

Defaults to false

autoSelectField boolean

Specifies a boolean value whether enable / disable the auto selection with the first value for the field.

Defaults to false

autoSelectOperator boolean

Specifies a boolean value whether enable / disable the auto selection with the first value for the operator.

Defaults to true

columns ColumnsModel[]

Specifies columns to create filters.

Defaults to {}

cssClass string

Defines class or multiple classes, which are separated by a space in the QueryBuilder element.
You can add custom styles to the QueryBuilder using the cssClass property.

Defaults to ’’

dataSource Object[]|Object|DataManager

Binds the column name from data source in query-builder.
The dataSource is an array of JavaScript objects.

Defaults to []

displayMode DisplayMode

Specifies the displayMode as Horizontal or Vertical.

Defaults to ‘Horizontal’

enableNotCondition boolean

Enables/Disables the not group condition in query builder.

Defaults to false

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.
If enabled, filter states will be persisted.

Defaults to false.

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableSeparateConnector boolean

Specifies whether to enable separate connectors between rules/groups.

Defaults to false

fieldMode FieldMode

Specifies the fieldMode as DropDownList or DropDownTree.

Defaults to ‘Default’

fieldModel DropDownListModel|DropDownTreeModel

Specifies the property for field.

Defaults to null

headerTemplate any

Specifies the template for the header with any other widgets.

Defaults to null

height string

Specifies the height of the query builder.

Defaults to ‘auto’

immediateModeDelay number

If immediateModeDelay is set by particular number, the rule Change event is triggered after that period.

Defaults to 0

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

matchCase boolean

If match case is set to true, the grid filters the records with exact match.
if false, it filters case insensitive records (uppercase and lowercase letters treated the same).

Defaults to false

maxGroupCount number

Specifies the maximum group count or restricts the group count.

Defaults to 5

operatorModel DropDownListModel

Specifies the property for operator.

Defaults to null

readonly boolean

When set to true, the user interactions on the component are disabled.

Defaults to false

rule RuleModel

Defines rules in the QueryBuilder.
Specifies the initial rule, which is JSON data.

Defaults to {}

separator string

Specifies the separator string for column.

Defaults to ’’

showButtons ShowButtonsModel

Specifies the showButtons settings of the query builder component.
The showButtons can be enable Enables or disables the ruleDelete, groupInsert, and groupDelete buttons.

Defaults to { ruleDelete: true , groupInsert: true, groupDelete: true }

sortDirection SortDirection

Specifies the sort direction of the field names.

Defaults to ‘Default’

summaryView boolean

Shows or hides the filtered query.

Defaults to false

valueModel ValueModel

Specifies the property for value.

Defaults to null

width string

Specifies the width of the query builder.

Defaults to ‘auto’

Methods

addGroups

Adds single or multiple groups, which contains the collection of rules.

Parameter	Type	Description
groups	RuleModel[]	‘group collection’ to be passed to add the groups.
groupID	string	‘group id’ to be passed to add the groups.

Returns void

addRules

Adds single or multiple rules.

Parameter	Type	Description
rule	RuleModel[]	‘rule collection’ to be passed to add the rules.
groupID	string	‘group id’ to be passed to add the rule in groups.

Returns void

cloneGroup

Clones the group based on the group ID to the specific group.

Parameter	Type	Description
groupID	string	Specifies the groupID that needs to be cloned.
parentGroupID	string	Specifies the parentGroupID in which the group to be cloned.
index	number	Specifies the index to insert the cloned group inside the parent group.

Returns void

cloneRule

Clones the rule based on the rule ID to the specific group.

Parameter	Type	Description
ruleID	string	Specifies the ruleID that needs to be cloned.
groupID	string	Specifies the groupID in which the rule to be cloned.
index	number	Specifies the index to insert the cloned rule inside the group.

Returns void

deleteGroup

Delete the Group

Parameter	Type	Description
target	Element | string	‘target’ to be passed to delete the group.

Returns void

deleteGroups

Deletes the group or groups based on the group ID.

Parameter	Type	Description
groupIdColl	string[]	‘groupIdColl’ to be passed to delete groups.

Returns void

deleteRules

Deletes the rule or rules based on the rule ID.

Parameter	Type	Description
ruleIdColl	string[]	‘ruleIdColl’ to be passed to delete rules.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers.
Also it maintains the initial input element from the DOM.

Returns void

getDataManagerQuery

Gets the query for Data Manager.

Parameter	Type	Description
rule	RuleModel	‘rule’ to be passed to get query.

Returns Query

getFilteredRecords

Return the Query from current rules collection.

Returns Promise | object

getGroup

Gets the group.

Parameter	Type	Description
target	Element | string	‘target’ to be passed to get group.

Returns RuleModel

getMongoQuery

Gets the Mongo query from rules.

Parameter	Type	Description
rule (optional)	RuleModel	‘rule’ to be passed to get the sql.

Returns string

getOperators

Return the operator bound to the column.

Returns * { : }[]*

getParameterizedNamedSql

Gets the named parameter SQL query from rules.

Parameter	Type	Description
rule (optional)	RuleModel	– Specify the rule to be passed to get the named parameter SQL string.

Returns ParameterizedNamedSql

getParameterizedSql

Gets the parameter SQL query from rules.

Parameter	Type	Description
rule (optional)	RuleModel	– Specify the rule to be passed to get the parameter sql string.

Returns ParameterizedSql

getPredicate

Get the predicate from collection of rules.

Parameter	Type	Description
rule	RuleModel	‘rule’ to be passed to get predicate.

Returns Predicate

getRule

Gets the rule.

Parameter	Type	Description
elem	string | HTMLElement	‘elem’ to be passed to get rule.

Returns RuleModel

getRules

Gets the rule or rule collection.

Returns RuleModel

getRulesFromSql

Get the rules from SQL query.

Parameter	Type	Description
sqlString	string	‘sql String’ to be passed to get the rule.
sqlLocale (optional)	boolean	Set true if Localization for Sql query.

Returns RuleModel

getSqlFromRules

Gets the sql query from rules.

Parameter	Type	Description
rule (optional)	RuleModel	‘rule’ to be passed to get the sql.
allowEscape (optional)	boolean	Set true if it exclude the escape character.
sqlLocale (optional)	boolean	Set true if Localization for Sql query.

Returns string

getValidRules

Get the valid rule or rules collection.

Parameter	Type	Description
currentRule (optional)	RuleModel	‘currentRule’ to be passed to get the valid rules.

Returns RuleModel

getValues

Return values bound to the column.

Parameter	Type	Description
field	string	‘field’ to be passed to get the field values.

Returns object[]

lockGroup

Locks the group based on the group ID

Parameter	Type	Description
groupID	string	Specifies the groupID that needs to be locked.

Returns void

lockRule

Locks the rule based on the rule ID.

Parameter	Type	Description
ruleID	string	Specifies the ruleID that needs to be locked.

Returns void

notifyChange

Notify the changes to component.

Parameter	Type	Description
value	string | number | boolean | Date | string[] | number[] | Date[]	‘value’ to be passed to update the rule value.
element	Element	‘element’ to be passed to update the rule.
type (optional)	string	‘type’ to be passed to update the rule .

Returns void

reset

Clears the rules without root rule.

Returns void

setMongoQuery

Set the rules from Mongo query.

Parameter	Type	Description
mongoQuery	string	‘sql String’ to be passed to get the rule.
mongoLocale (optional)	boolean	Set true if Localization for Mongo query.

Returns void

setParameterizedNamedSql

Sets the rules from the named parameter SQL query.

Parameter	Type	Description
sqlQuery	ParameterizedNamedSql	– Specifies the named parameter SQL to be passed to set the rule and load it to the query builder.

Returns void

setParameterizedSql

Sets the rules from the parameter sql query.

Parameter	Type	Description
sqlQuery	ParameterizedSql	– Specifies the parameter SQL to be passed to set the rule and load it to the query builder.

Returns void

setRules

Set the rule or rules collection.

Parameter	Type	Description
rule	RuleModel	‘rule’ to be passed to set rules.

Returns void

setRulesFromSql

Sets the rules from the sql query.

Parameter	Type	Description
sqlString	string	‘sql String’ to be passed to set the rule.
sqlLocale (optional)	boolean	Optional. Set true if Localization for Sql query.

Returns void

validateFields

Validate the conditions and it display errors for invalid fields.

Returns boolean

Events

actionBegin EmitType<ActionEventArgs>

Triggers when field, operator, value is change.

beforeChange EmitType<ChangeEventArgs>

Triggers before the condition (And/Or), field, operator, value is changed.

change EmitType<ChangeEventArgs>

Triggers when changing the condition(AND/OR), field, value, operator is changed.

created EmitType<Event>

Triggers when the component is created.

dataBound EmitType<Object>

Triggers when dataBound to the Query Builder.

ruleChange EmitType<RuleChangeEventArgs>

Triggers when changing the condition(AND/OR), field, value, operator is changed