A component used for operating with complex filters by creating or editing conditions and grouping them using AND/OR logic. It is used internally in the Advanced Filtering of the Grid.

IgcQueryBuilderComponent

new IgcQueryBuilderComponent(args: any[]): IgcQueryBuilderComponent

Returns IgcQueryBuilderComponent

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

tagName: string
disableEntityChange: boolean
disableReturnFieldsChange: boolean
entities: IgcEntityType[]
expressionTree: IgcExpressionTree
locale: string
resourceStrings: IgcQueryBuilderResourceStrings
searchValueTemplate: IgcRenderFunction<IgcQueryBuilderSearchValueContext>
showEntityChangeDialog: boolean
get queryBuilderHeaderCollection(): IgcQueryBuilderHeaderComponent[]

Returns IgcQueryBuilderHeaderComponent[]

Inherited from: EventEmitterMixin<IgcQueryBuilderComponentEventMap, Constructor<LitElement>>(LitElement)

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Parameters

  • type: K
  • listener: object
  • options: boolean | AddEventListenerOptions

Returns void

Returns whether the expression tree can be committed in the current state.

canCommit(): boolean

Returns boolean

Commits the expression tree in the current state if it is valid. If not throws an exception.

commit(): void

Returns void

Discards all unsaved changes to the expression tree.

discard(): void

Returns void

Inherited from: EventEmitterMixin<IgcQueryBuilderComponentEventMap, Constructor<LitElement>>(LitElement)

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Parameters

  • type: K
  • listener: object
  • options: boolean | EventListenerOptions

Returns void

register(): void

Returns void

Event fired as the expression tree is changed.

<igx-query-builder (expressionTreeChange)='onExpressionTreeChange()'></igx-query-builder>
expressionTreeChange: CustomEvent<IgcExpressionTree>

Example

<igx-query-builder [entities]="this.entities">
</igx-query-builder>