QueryBuilder
QueryBuilder allows you to build dynamically queries for filtering.
Selector
smart-query-builder
Properties
allowDragboolean
Enables the dragging of conditions inside a group or between groups.
Default valuefalse
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
applyModeQueryBuilderApplyMode
Determines when the value of the element is updated with the new changes.
Default valuechange
customOperations{label: string, name: string, hideValue: boolean}[]
Adds more operations that can be used to the query bilder's conditions structure. Each custom operation can have the following fields:
- label - label to be displayed in the operator box. Multiple operations with the same label can exist.
- name - unique name of the operation
- editorTemplate - callback function that creates a custom value editor
- valueTemplate - callback function that displays the value after the edior has been closed
- handleValue - callback function that handles the value returned by the editor when it is closed
- hideValue - a boolean condition that specifies whether the operation requires a value or not
- expressionTemplate - a string representing a custom Linq expression template. If the value of the element is a string it will be considered as a Linq expression and it will be checked against all expressionTemplates to find a match.
- expressionReaderCallback - a callback that is used to specify which arguments from the expression are used for the fieldName and value. Used when converting a Linq expression to QueryBuilder value.
- expressionBuilderCallback - a callback function that is used to specify which arguments from the Linq expression are used for the fieldName and value when building the Linq expression from the current value of the element.
disabledboolean
Enables or disables the element.
Default valuefalse
dropDownWidthstring
Sets or gets the dropdown width of the property and operator editors.
Default value"100%
fieldsany
Array with filter fields and their settings. The available field settings are:
- label - the field's label, as it will appear in the field selection drop down
- dataField - the field's data field
- dataType - the field's data type
- filterOperations - an array of the filter operations applicable to the field; if not set, the default filter operations are applied
- lookup - an object with settings for customizing the field's respective value selection input. It has the following settings:
- autoCompleteDelay - delay between typing in the input and opening the drop down with available options
- dataSource - an array of available options to choose from (appear in a drop down)
- minLength - minimum number of charactes to type in the input before the options drop down is displayed
- readonly - if set to true, the value selection input acts as a drop down list, otherwise it acts as a combo box
fieldsModeQueryBuilderFieldsMode
Determines whether new fields can be dynamically added by typing in the field (property) box.
Default valuedynamic
formatStringDatestring
Sets or gets the format string of the editor of fields with type 'date'.
Default value"dd-MMM-yy
formatStringDateTimestring
Sets or gets the format string of the editor of fields with type 'dateTime'.
Default value"dd-MMM-yy HH:mm:ss
getDynamicFieldany
A callback function called when a field is added dynamically. Used for configuring settings of the new field. Applicable only when fieldsMode is 'dynamic'.
iconsQueryBuilderIcons
Defines CSS classes to be applied to each of the built-in operations. Icons for these classes are applied in the smart-query-builder style sheet. This property is applicable only if showIcons is set to true.
Default value{ '=': 'equals', '<>': 'notequals', '>': 'greaterthan', '>=': 'greaterthanorequal', '<': 'lessthan', '<=': 'lessthanorequal', 'startswith': 'startswith', 'endswith': 'endswith', 'contains': 'contains', 'notcontains': 'notcontains', 'isblank': 'isblank', 'isnotblank': 'isnotblank' }
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback used to customize the format of the messages that are returned from the Localization Module.
messagesany
Defines field names of the filtered element.
Default value
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to {{files}}.",
"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",
"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
"addCondition": "Add Condition",
"addGroup": "Add Group",
"and": "And",
"notand": "Not And",
"or": "Or",
"notor": "Not Or",
"=": "Equals",
"<>": "Does not equal",
">": "Greater than",
">=": "Greater than or equal to",
"<": "Less than",
"<=": "Less than or equal to",
"startswith": "Starts with",
"endswith": "Ends with",
"contains": "Contains",
"notcontains": "Does not contain",
"isblank": "Is blank",
"isnotblank": "Is not blank",
"wrongParentGroupIndex": "{{elementType}}: Wrong parent group index in '{{method}}' method.",
"missingFields": "{{elementType}}: Fields are required for proper condition's adding. Set \"fields\" source and then conditions will be added as expected.",
"wrongElementNode": "{{elementType}}: Incorect node / node Id in '{{method}}' method.",
"invalidDataStructure": "{{elementType}}: Used invalid data structure in updateCondition/updateGroup method."
}
operatorPlaceholderstring
Determines the placeholder text used inside the condition's operator box in case an operator is not selected.
Default value"Operator
propertyPlaceholderstring
Determines the placeholder text used inside the condition's field (property) box in case a field is not selected.
Default value"Property
rightToLeftboolean
Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Default valuefalse
showIconsboolean
Shows/Hides the operator icons shown in the operator selection drop down.
Default valuefalse
themestring
Determines the theme. Theme defines the look of the element
Default value"
unfocusableboolean
If is set to true, the element cannot be focused.
Default valuefalse
valueany
The value is represented by multidimensional array. The array contains group operators with conditions. Each group can contain multiple conditions.
valueFormatFunctionany
Callback used to format the content of the value fields.
valuePlaceholderstring
Determines the placeholder text used inside the condition's value box in case a value is not set.
Default value"Value
onchange((this: Window, ev: Event) => any) | null
This event is triggered when the query builder's value is changed.
Arguments
evEvent
ev.detailObject
ev.detail.item - The item that is being dragged.
ev.detail.data - The data of the item that is being dragged.
ev.detail.originalEvent - The original event.
ondragend((this: Window, ev: Event) => any) | null
This event is triggered when a dragged condition is dropped. This action can be canceled by calling event.preventDefault() in the event handler function.
Arguments
evEvent
ev.detailObject
ev.detail.item - The item that is being dragged.
ev.detail.data - The data of the item that is being dragged.
ev.detail.target - The target item.
ev.detail.targetData - the data of the target item.
ev.detail.targetSide - The side of the target item where the dragged item will be dropped.
ondragging((this: Window, ev: Event) => any) | null
This event is triggered when a condition is being dragged.
Arguments
evEvent
ev.detailObject
ev.detail.item - The item that is being dragged.
ev.detail.data - The data of the item that is being dragged.
ev.detail.originalEvent - The original event.
ondragstart((this: Window, ev: Event) => any) | null
This event is triggered when a dragging operation is started in smart-query-builder. This action can be canceled by calling event.preventDefault() in the event handler function.
Arguments
evEvent
ev.detailObject
ev.detail.item - The item is going to be dragged.
ev.detail.data - The data of the item that is going to be dragged.
ev.detail.originalEvent - The original event.
onitemclick((this: Window, ev: Event) => any) | null
This event is triggered when one of the query builder's building blocks ( oeprator, fieldName, value, close button, etc) is clicked.
Arguments
evEvent
ev.detailObject
ev.detail.id - The internal id of the clicked item, e.g. '0.1', '1.1', etc.
ev.detail.type - The type of the clicked item ( condition or a group ).
ev.detail.data - The data of the item.
onpropertyselected((this: Window, ev: Event) => any) | null
This event is triggered when a field has been selected.
Arguments
evEvent
ev.detailObject
ev.detail.label - The label of the selected property.
ev.detail.value - The value of the selected property.
Methods
getLinq(): any
Converts the current value of the element to DynamicLINQ expression.
Returnsany
QueryBuilderIcons
Properties
0any
Default valueundefined
1any
Default valueundefined
2any
Default valueundefined
3any
Default valueundefined
4any
Default valueundefined
5any
Default valueundefined
6any
Default valueundefined
7any
Default valueundefined
8any
Default valueundefined
9any
Default valueundefined
10any
Default valueundefined
11any
Default valueundefined
12any
Default valueundefined
13any
Default valueundefined
14any
Default valueundefined
15any
Default valueundefined
16any
Default valueundefined
17any
Default valueundefined
18any
Default valueundefined
19any
Default valueundefined
20any
Default valueundefined
21any
Default valueundefined
22any
Default valueundefined
23any
Default valueundefined
24any
Default valueundefined
25any
Default valueundefined
26any
Default valueundefined
27any
Default valueundefined
28any
Default valueundefined
29any
Default valueundefined
30any
Default valueundefined
31any
Default valueundefined
32any
Default valueundefined
33any
Default valueundefined
34any
Default valueundefined
35any
Default valueundefined
36any
Default valueundefined
37any
Default valueundefined
38any
Default valueundefined
39any
Default valueundefined
40any
Default valueundefined
41any
Default valueundefined
42any
Default valueundefined
43any
Default valueundefined
44any
Default valueundefined
45any
Default valueundefined
46any
Default valueundefined
47any
Default valueundefined
48any
Default valueundefined
49any
Default valueundefined
50any
Default valueundefined
51any
Default valueundefined
52any
Default valueundefined
53any
Default valueundefined
54any
Default valueundefined
55any
Default valueundefined
56any
Default valueundefined
57any
Default valueundefined
58any
Default valueundefined
59any
Default valueundefined
60any
Default valueundefined
61any
Default valueundefined
62any
Default valueundefined
63any
Default valueundefined
64any
Default valueundefined
65any
Default valueundefined
66any
Default valueundefined
67any
Default valueundefined
68any
Default valueundefined
69any
Default valueundefined
70any
Default valueundefined
71any
Default valueundefined
72any
Default valueundefined
73any
Default valueundefined
74any
Default valueundefined
75any
Default valueundefined
76any
Default valueundefined
77any
Default valueundefined
78any
Default valueundefined
79any
Default valueundefined
80any
Default valueundefined
81any
Default valueundefined
82any
Default valueundefined
83any
Default valueundefined
84any
Default valueundefined
85any
Default valueundefined
86any
Default valueundefined
87any
Default valueundefined
88any
Default valueundefined
89any
Default valueundefined
90any
Default valueundefined
91any
Default valueundefined
92any
Default valueundefined
93any
Default valueundefined
94any
Default valueundefined
95any
Default valueundefined
96any
Default valueundefined
97any
Default valueundefined
98any
Default valueundefined
99any
Default valueundefined
100any
Default valueundefined
101any
Default valueundefined
102any
Default valueundefined
103any
Default valueundefined
104any
Default valueundefined
105any
Default valueundefined
106any
Default valueundefined
107any
Default valueundefined
108any
Default valueundefined
109any
Default valueundefined
110any
Default valueundefined
111any
Default valueundefined
112any
Default valueundefined
113any
Default valueundefined
114any
Default valueundefined
115any
Default valueundefined
116any
Default valueundefined
117any
Default valueundefined
118any
Default valueundefined
119any
Default valueundefined
120any
Default valueundefined
121any
Default valueundefined
122any
Default valueundefined
123any
Default valueundefined
124any
Default valueundefined
125any
Default valueundefined
126any
Default valueundefined
127any
Default valueundefined
128any
Default valueundefined
129any
Default valueundefined
130any
Default valueundefined
131any
Default valueundefined
132any
Default valueundefined
133any
Default valueundefined
134any
Default valueundefined
135any
Default valueundefined
136any
Default valueundefined
137any
Default valueundefined
138any
Default valueundefined
139any
Default valueundefined
140any
Default valueundefined
141any
Default valueundefined
142any
Default valueundefined
143any
Default valueundefined
144any
Default valueundefined
145any
Default valueundefined
146any
Default valueundefined
147any
Default valueundefined
148any
Default valueundefined
149any
Default valueundefined
150any
Default valueundefined
151any
Default valueundefined
152any
Default valueundefined
153any
Default valueundefined
154any
Default valueundefined
155any
Default valueundefined
156any
Default valueundefined
157any
Default valueundefined
158any
Default valueundefined
159any
Default valueundefined
160any
Default valueundefined
161any
Default valueundefined
162any
Default valueundefined
163any
Default valueundefined
164any
Default valueundefined
165any
Default valueundefined
166any
Default valueundefined
167any
Default valueundefined
168any
Default valueundefined
169any
Default valueundefined
170any
Default valueundefined
171any
Default valueundefined
172any
Default valueundefined
173any
Default valueundefined
174any
Default valueundefined
175any
Default valueundefined
176any
Default valueundefined
177any
Default valueundefined
178any
Default valueundefined
179any
Default valueundefined
180any
Default valueundefined
181any
Default valueundefined
182any
Default valueundefined
183any
Default valueundefined
184any
Default valueundefined
185any
Default valueundefined
186any
Default valueundefined
187any
Default valueundefined
188any
Default valueundefined
189any
Default valueundefined
190any
Default valueundefined
191any
Default valueundefined
192any
Default valueundefined
193any
Default valueundefined
194any
Default valueundefined
195any
Default valueundefined
196any
Default valueundefined
197any
Default valueundefined
198any
Default valueundefined
199any
Default valueundefined
200any
Default valueundefined
201any
Default valueundefined
202any
Default valueundefined
203any
Default valueundefined
204any
Default valueundefined
205any
Default valueundefined
206any
Default valueundefined
207any
Default valueundefined
208any
Default valueundefined
209any
Default valueundefined
210any
Default valueundefined
211any
Default valueundefined
212any
Default valueundefined
213any
Default valueundefined
214any
Default valueundefined
215any
Default valueundefined
216any
Default valueundefined
217any
Default valueundefined
218any
Default valueundefined
219any
Default valueundefined
220any
Default valueundefined
221any
Default valueundefined
222any
Default valueundefined
223any
Default valueundefined
224any
Default valueundefined
225any
Default valueundefined
226any
Default valueundefined
227any
Default valueundefined
228any
Default valueundefined
229any
Default valueundefined
230any
Default valueundefined
231any
Default valueundefined
232any
Default valueundefined
233any
Default valueundefined
234any
Default valueundefined
235any
Default valueundefined
236any
Default valueundefined
237any
Default valueundefined
238any
Default valueundefined
239any
Default valueundefined
240any
Default valueundefined
241any
Default valueundefined
242any
Default valueundefined
243any
Default valueundefined
244any
Default valueundefined
245any
Default valueundefined
246any
Default valueundefined
247any
Default valueundefined
248any
Default valueundefined
249any
Default valueundefined
250any
Default valueundefined
251any
Default valueundefined
252any
Default valueundefined
253any
Default valueundefined
254any
Default valueundefined
255any
Default valueundefined
256any
Default valueundefined
257any
Default valueundefined
258any
Default valueundefined
259any
Default valueundefined
260any
Default valueundefined
261any
Default valueundefined
262any
Default valueundefined
263any
Default valueundefined
264any
Default valueundefined
265any
Default valueundefined
266any
Default valueundefined
267any
Default valueundefined
268any
Default valueundefined
269any
Default valueundefined
270any
Default valueundefined
271any
Default valueundefined
272any
Default valueundefined
273any
Default valueundefined
274any
Default valueundefined
275any
Default valueundefined
276any
Default valueundefined
277any
Default valueundefined
278any
Default valueundefined
279any
Default valueundefined
280any
Default valueundefined
281any
Default valueundefined
Defines CSS classes to be applied to each of the built-in operations. Icons for these classes are applied in the smart-query-builder style sheet. This property is applicable only if showIcons is set to true.