Enables the dragging of conditions inside a group or between groups.

Code examples

Set the allowDrag property.

 <smart-query-builder allow-drag></smart-query-builder>

Set the allowDrag property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.allowDrag = false;

Get the allowDrag property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let allowDrag = queryBuilder.allowDrag;

Possible values: 'none', 'simple', 'advanced'.
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Code examples

Set the animation property.

 <smart-query-builder animation='none'></smart-query-builder>

Set the animation property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.animation = 'simple';

Get the animation property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let animation = queryBuilder.animation;

Possible values: 'immediately', 'change'.
Sets or gets whether changes to the value are applied on change event or immediately.

Code examples

Set the applyMode property.

 <smart-query-builder apply-mode='immediately'></smart-query-builder>

Set the applyMode property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.applyMode = 'change';

Get the applyMode property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let applyMode = queryBuilder.applyMode;

Adds more operations that can be used in 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

Code examples

Set the customOperations property.

 <smart-query-builder custom-operations='[{ label: "Matches /^\d{7}$/g", name: "/^\d{7}$/g", hideValue: true }, { label: "Similar to", name: "similar" }]'></smart-query-builder>

Set the customOperations property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.customOperations = [{ label: 'Is valid', name: 'isvalid' }];

Get the customOperations property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let customOperations = queryBuilder.customOperations;

Enables or disables the element.

Code examples

Set the disabled property.

 <smart-query-builder disabled></smart-query-builder>

Set the disabled property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.disabled = false;

Get the disabled property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let disabled = queryBuilder.disabled;

Array with filter fields and their settings.

Code examples

Set the fields property.

 <smart-query-builder fields='[{ "label": "id", "dataField": "id", "dataType": "number", "format": null, "filterOperations": ["=", "anyof"] }, { "label": "Product", "dataField": "productName", "dataType": "string", "format": null }]'></smart-query-builder>

Set the fields property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.fields = [{ "label": "id", "dataField": "id", "dataType": "number", "format": null, "filterOperations": ["=", "anyof"] }, { "label": "Product", "dataField": "productName", "dataType": "string", "format": null }];

Get the fields property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let fields = queryBuilder.fields;

Possible values: 'dynamic', 'static'.
Sets or gets whether new fields can be dynamically added by typing in the field (property) box.

Code examples

Set the fieldsMode property.

 <smart-query-builder fields-mode='static'></smart-query-builder>

Set the fieldsMode property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.fieldsMode = 'dynamic';

Get the fieldsMode property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let fieldsMode = queryBuilder.fieldsMode;

Sets or gets the format string of the editor of fields with type 'date'.

Code examples

Set the formatStringDate property.

 <smart-query-builder format-string-date='dddd-MMMM-yyyy'></smart-query-builder>

Set the formatStringDate property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.formatStringDate = 'M/d/yyyy';

Get the formatStringDate property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let formatStringDate = queryBuilder.formatStringDate;

Sets or gets the format string of the editor of fields with type 'datetime'.

Code examples

Set the formatStringDateTime property.

 <smart-query-builder format-string-date-time='h:mm:ss tt'></smart-query-builder>

Set the formatStringDateTime property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.formatStringDateTime = 'yyyy-MM-dd hh:mm:ss';

Get the formatStringDateTime property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let formatStringDateTime = queryBuilder.formatStringDateTime;

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.

Code examples

Set the icons property.

 <smart-query-builder icons='{ "=": "equals", "<>": "notequals", ">": "greaterthan", ">=": "greaterthanorequal", "<": "lessthan", "<=": "lessthanorequal", "startswith": "startswith", "endswith": "endswith", "contains": "contains", "notcontains": "notcontains", "isblank": "blank", "isnotblank": "notblank" }'></smart-query-builder>

Set the icons property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.icons = { '=': 'equals', '<>': 'notequals', '>': 'greaterthan', '>=': 'greaterthanorequal', '<': 'lessthan', '<=': 'lessthanorequal', 'startswith': 'startswith', 'endswith': 'endswith', 'contains': 'contains', 'notcontains': 'notcontains', 'isblank': 'blank', 'isnotblank': 'notblank' };

Get the icons property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let icons = queryBuilder.icons;

Sets or gets the language. Used in conjunction with the property messages.

Code examples

Set the locale property.

 <smart-query-builder locale='de'></smart-query-builder>

Set the locale property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.locale = 'fr';

Get the locale property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let locale = queryBuilder.locale;

Callback, related to localization module.

Code examples

Set the localizeFormatFunction property.

 <smart-query-builder localize-format-function='function(){return '...'}'></smart-query-builder>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.localizeFormatFunction = function(){return '...'};

Get the localizeFormatFunction property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let localizeFormatFunction = queryBuilder.localizeFormatFunction;

Defines field names of the filtered element.

Code examples

Set the messages property.

 <smart-query-builder messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert \"{{name}}\"! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: \"{{property}}\" Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","addCondition":"Bedingung hinzufugen","addGroup":"Gruppe hinzufugen","and":"Und","notand":"Nicht und","or":"Oder","notor":"Nicht oder","=":"Gleich","<>":"Ist nicht gleich",">":"Greusser als",">=":"Greusser als oder gleich wie","<":"Weniger als","<=":"Weniger als oder gleich","startswith":"Beginnt mit","endswith":"Endet mit","contains":"Enthalt","notcontains":"Beinhaltet nicht","isblank":"Ist leer","isnotblank":"Ist nicht leer","wrongParentGroupIndex":"{{elementType}}: Falscher ubergeordneter Gruppenindex in der Methode \"{{method}}\".","missingFields":"{{elementType}}: Felder sind fur das Hinzufugen der richtigen Bedingung erforderlich. Legen Sie die Quelle fur \"Felder\" fest, und die Bedingungen werden wie erwartet hinzugefugt.","wrongElementNode":"{{elementType}}: Falsche Knoten- / Knoten-ID in der Methode \"{{method}}\".","invalidDataStructure":"{{elementType}}: In der Methode updateCondition / updateGroup wurde eine ungultige Datenstruktur verwendet."}}'></smart-query-builder>

Set the messages property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.messages = {"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."}};

Get the messages property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let messages = queryBuilder.messages;

The placeholder text is used in the condition's operator box in case an operator is not selected.

Code examples

Set the operatorPlaceholder property.

 <smart-query-builder operator-placeholder='Operator not set'></smart-query-builder>

Set the operatorPlaceholder property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.operatorPlaceholder = 'Choose operator...';

Get the operatorPlaceholder property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let operatorPlaceholder = queryBuilder.operatorPlaceholder;

The placeholder text is used in the condition's field (property) box in case a field is not selected.

Code examples

Set the propertyPlaceholder property.

 <smart-query-builder property-placeholder='Property not set'></smart-query-builder>

Set the propertyPlaceholder property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.propertyPlaceholder = 'Choose property...';

Get the propertyPlaceholder property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let propertyPlaceholder = queryBuilder.propertyPlaceholder;

Enables or disables the display of the icons.

Code examples

Set the showIcons property.

 <smart-query-builder show-icons></smart-query-builder>

Set the showIcons property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.showIcons = false;

Get the showIcons property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let showIcons = queryBuilder.showIcons;

Determines the theme. Theme defines the look of the element

Code examples

Set the theme property.

 <smart-query-builder theme='blue'></smart-query-builder>

Set the theme property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.theme = 'red';

Get the theme property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let theme = queryBuilder.theme;

If is set to true, the element cannot be focused.

Code examples

Set the unfocusable property.

 <smart-query-builder unfocusable></smart-query-builder>

Set the unfocusable property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.unfocusable = false;

Get the unfocusable property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let unfocusable = queryBuilder.unfocusable;

The value is represented by multidimensional array. The array contains group operators with conditions. Each group can contain multiple conditions.

Code examples

Set the value property.

 <smart-query-builder value='[[["productCode", "/^\d{7}$/g"], "or", ["id", "isvalid", true]]]'></smart-query-builder>

Set the value property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.value = [[['available', '=', true], 'and', ['price', '<', 1300],], 'or', [['produced', '>', new Date(2015, 3, 4)], 'and', ['purchased', '>=', new Date(2019, 4, 23, 15, 33)]]];

Get the value property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let value = queryBuilder.value;

Callback used to format the content of the value fields.

Code examples

Set the valueFormatFunction property.

 <smart-query-builder value-format-function='function (value) { return value + '%'; }'></smart-query-builder>

Set the valueFormatFunction property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.valueFormatFunction = function (value) { return value + '$'; };

Get the valueFormatFunction property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let valueFormatFunction = queryBuilder.valueFormatFunction;

The placeholder text is used in the condition's value box in case a value is not set.

Code examples

Set the valuePlaceholder property.

 <smart-query-builder value-placeholder='Value not set'></smart-query-builder>

Set the valuePlaceholder property by using the HTML Element's instance.

 const queryBuilder = document.querySelector('smart-query-builder');

 queryBuilder.valuePlaceholder = 'Choose value...';

Get the valuePlaceholder property.

 const queryBuilder = document.querySelector('smart-query-builder');

 let valuePlaceholder = queryBuilder.valuePlaceholder;

This event is triggered when the query builder's value is changed.

Code examples

Bind to the change event by type: smartQueryBuilder

 const queryBuilder = document.querySelector('smart-query-builder'); 

 queryBuilder.addEventListener('change', function (event) {
     // event handling code goes here.
 }
 

This event is triggered when a dragged condition is dropped. This action can be canceled by calling event.preventDefault() in the event handler function.

Code examples

Bind to the dragEnd event by type: smartQueryBuilder

 const queryBuilder = document.querySelector('smart-query-builder'); 

 queryBuilder.addEventListener('dragEnd', function (event) {
     // event handling code goes here.
 }
 

This event is triggered when a condition is being dragged.

Code examples

Bind to the dragging event by type: smartQueryBuilder

 const queryBuilder = document.querySelector('smart-query-builder'); 

 queryBuilder.addEventListener('dragging', function (event) {
     // event handling code goes here.
 }
 

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.

Code examples

Bind to the dragStart event by type: smartQueryBuilder

 const queryBuilder = document.querySelector('smart-query-builder'); 

 queryBuilder.addEventListener('dragStart', function (event) {
     // event handling code goes here.
 }
 

This event is triggered when some of the query builder's building blocks is clicked.

Code examples

Bind to the itemClick event by type: smartQueryBuilder

 const queryBuilder = document.querySelector('smart-query-builder'); 

 queryBuilder.addEventListener('itemClick', function (event) {
     // event handling code goes here.
 }