Active Query Builder support area

AQB ASP.NET 3 - JavaScript API Documentation

Last modified:


Contents

AQB.Web namespace

The main Active Query Builder namespace.

Modules

Name Description
Enum Different enumerations, such as DataSourceType, AffectedColumns and so on.
Dto Data transfer model constructors to exchange data between server and client.
Core The module to work with the internal query object model and the events which fired on model changes.
UI The module to work with the client controls.

Properties

theme

Allows the definition of a custom styling scheme. Styles will be applied to all HTML elements constituting the component's UI.

Following fields accept a space-separated list of CSS class names to be applied to appropriate HTML elements:

  • widget
  • header
  • content
  • button
  • buttonEnabled
  • buttonDisabled
  • active
  • hover
  • cornerAll
  • cornerTop
  • cornerBottom
host

Redirects requests to Active Query Builder handlers to a different host.

Note that you must allow cross-origin queries in your application. See the "CrossOrigin" demo project for details.

virtualDirectory

Redirects requests to Active Query Builder handlers to the custom path in the case of a custom routing table.

You must specify it manually running the component in the client-side rendering mode

In the case of server-side rendering, Active Query Builder automatically detects IIS virtual directory in a Classic ASP.NET MVC or WebForms app and configures the client accordingly, but it can't detect it in the ASP.NET Core. In this case, you can specify it server-side to the BaseHandler.VirtualDirectory property instead.

useRelativePaths

Bool. Treats paths to the Active Query Builder handler and the necessary resources as relative to the current web page location. I.e. adds "./" to all URLs.

Note: Setting this property to True negates the settings of the host and virtualDirectory properties.

In the case of server-side rendering, use the BaseHandler.UseRelativePaths property instead.

Methods

dispose

Frees all allocated resources and deletes the AQB namespace. The only way to re-initialize AQB after that is to re-load the script.

If you want to free a specific QueryBuilder client instance and/or free the associated server resources, use the AQB.Web.QueryBuilder.dispose method described below.

onQueryBuilderReady

Allows subscribing to the QueryBuilder events. It is called after the first data exchange with the server.

Updating the list of query columns on changing the query in the QueryBuilder
AQB.Web.onQueryBuilderReady(function (qb) {
    qb.on(qb.Events.SqlChanged, function () {
        AQB.Web.CriteriaBuilder.loadColumns();
    });
});
onCriteriaBuilderReady

Allows subscribing to the CriteriaBuilder events.

Loading query columns on the CriteriaBuilder initialization
AQB.Web.onCriteriaBuilderReady(function (cb) {
    cb.loadColumns();
});
beforeSend

Allows pre-processing of requests to Active Query Builder handlers.

It might be needed to organize token-based client authentication in the case of making cross-domain requests.

Objects

QueryBuilder

The main object in which all other visual query building controls exist.

CriteriaBuilder

The control which allows applying additional filters to the query. Usually used as a part of the data browsing interface.

AQB.Web.QueryBuilder object

Properties:

Name Description
SessionID Session identifier
SQL Full text of the query.  
activeSubQuerySQL Text of the currently active sub-query.
activeUnionSubQuerySQL Text of the currently active single SELECT statement.
clientSQL Text in the SQL editor.
lastGoodSQL Text of the last successfully parsed query from the SQL editor. Used to revert user changes on parsing error.
SQLError SQL parsing error. Hold the error description and position.
SyntaxProviderName Name of the syntax provider being used.
SyntaxProviderData Information about the peculiarities of the syntax provider being used.
QueryStructure Tree of sub-queries of the query. 
disableSessionKeeper Prescribes to ping or not to ping the server to avoid HTTP session expiration.
Events

List of available events. 

Subscription to the QueryBuilder events is possible in the AQB.Web.onQueryBuilderReady method using the AQB.Web.QueryBuilder.on method.

User interface components:

  • GridComponent
  • NavBarComponent
  • CanvasComponent
  • TreeViewComponent
  • StatusBarComponent
  • UserQueriesComponent
  • EditorComponent

Each of the aforementioned components has the element property. This is a reference to a jQuery object. With this object you can perform any manipulations with the DOM elements constituting the component, particularly:

  • change size
  • remove/add classes
  • relocate element on the page
  • hide
  • use other libraries to change their behavior, i.e. make it resizable, draggable, etc.

You can find the example of such usage in this article: How to make resizable, change the layout of controls on the web page?.

Events:

SQLUpdated

Fired on changing the query in the visual UI.

SQLError

Fired on SQL parsing error.

OnError

Fired on notifying the user about an internal error.

SQLTextChanged

Fired on changing the query text in the SQL text editor.

RefreshSQLClick

Fired on user click the Refresh button in the SQL text editor.

SessionExpired

Fired when the server refuses the client request due to the session expiration. Automatic session restoring is initiated then.

ActiveUnionSubQueryChanging

Occurs when the user issues a command to change the currently active Union Sub-Query (the SELECT statement displayed on the Canvas)

ActiveUnionSubQueryChanged

Occurs when the currently active Union Sub-Query (the displayed SELECT statement) has just been changed.

DataSourceAdding

Fired when the user commands to add a new datasource (database object, derived table, named sub-query from CTE, reusable query) to the Canvas.

Can be aborted. See the sample below.

DataSourceAdded

Fired when a new datasource is added to the Canvas.

DataSourceDeleting

Fired when the user commands to remove a datasource from the Canvas.

Can be aborted. See the sample below.

DataSourceFieldAdding

Fired when the user commands to add a new field to the query (marks a checkbox in the datasource field list on the Canvas).

Can be aborted. See the sample below.

DataSourceFieldAdded

Fired when a field is added to the query upon a user action with the datasource field list.

DataSourceFieldRemoving

Fired when the user commands to remove a field from the query (clears a checkbox in the datasource field list on the Canvas).

Can be aborted. See the sample below.

DataSourceFieldRemoved

Fired when a field is removed from the query upon a user action with the datasource field list.

LinkCreating

Fired when the user commands to add a new link (join) between two datasources in the Canvas.

Can be aborted. See the sample below.

LinkChanging

Fired when the user changes some properties of the link using the Properties Bar.

Can be aborted. See the sample below.

LinkChanged

Fired when link properties are changed upon user action.

LinkDeleting

Fired when the user commands to remove a link between two datasources on the Canvas.

Can be aborted. See the sample below.

GridOnRowChanging

Fired when the user commands to make changes to the Query Columns Grid row.

Can be aborted. See the sample below.

GridOnRowChanged

Fired when a row is changed upon user action.

GridOnRowAdding

Fired when the user commands to add a new row to the Query Columns Grid.

Can be aborted. See the sample below.

GridOnRowAdded

Fired when a row is added upon user action.

GridOnRowRemoved

Fired when a row is deleted upon user action.

Can be aborted. See the sample below.

GridOnRowRemoving

Fired when the user commands to delete a row from the Query Columns Grid.

Can be aborted. See the sample below.

Aborting user actions on the client-side with "-ing" suffixed QueryBuilder events
           AQB.Web.onQueryBuilderReady(function(qb) {
                qb.on(qb.Events.DataSourceAdding,
                    function(op, abort) {
                        abort.abort = true;
                    });
                qb.on(qb.Events.LinkCreating,
                    function(link, abort) {
                        abort.abort = true;
                    });
                qb.on(qb.Events.LinkDeleting,
                    function(link, abort) {
                        abort.abort = true;
                    });
            });

A dto object of the modified entity is passed as the first parameter for all query object model changing events. 

Methods:

on

Binds a handler to the event.

Subscribing to the SQLError event.
AQB.Web.QueryBuilder.on(AQB.Web.QueryBuilder.Events.SQLError, function(e, app, error) { 
    console.log(app);
    console.log(error);
})
removeListener

Unbinds handler from the event.

clearSql

Clears the query.

setSql

Sets new SQL query text.

restoreLastGoodSql

Restores the last successfully parsed SQL query. Actual after the SQL parsing error.

refreshSql

Sends the query text from SQL editor to the server.

clearSqlError

Clears the SQL parsing error.

update

Gets updated SQL query from the server. Must be called to update the query on the client after changing it on the server-side.

fullUpdate

Gets the updated SQL query from the server and refreshes the database objects tree. Must be called after changing database connection or refreshing metadata on the server.

switchToQueryRoot

Instructs to display the root sub-query.

getDataSources

Returns the list of all Datasource objects on the Canvas.

getLinks

Returns the list of all Link objects on the Canvas.

getQueryColumnList

Returns the list of all rows from the Grid control.

makeLayout

Creates the component HTML layout. Should be called when the component gets visible upon user action.

resetLayout

Rebuilds the Canvas and Grid controls.

 

showOverlay

Displays the overlay with the specified text on it hiding all of the query builder controls under it.

Displays the overlay.
AQB.Web.QueryBuilder.showOverlay('Message');
hideOverlay

Hides the overlay.

setUserData

Sends custom data to the server. Subscribe to the QueryBuilder.UserDataReceived event on the server to receive that data.

removeEditor

Removes the SQL editor control.

setEditor

Sets the SQL editor control. A control which is set as the SQL editor can be any control which implements the following methods:

  • getSql
  • setSql
  • setCursorPosition
  • focus
  • onChange
  • remove

 

Plugging of the custom SQL text editor (CodeMirror)
$(function() {
    var codeMirror = CodeMirror(document.body, {
        mode: 'text/x-sql',
        indentWithTabs: true,
        smartIndent: true,
        lineNumbers: true,
        matchBrackets: true
    });
			
	AQB.Web.QueryBuilder.setEditor({
		element: document.querySelector('.CodeMirror'),
		getSql: function () {
			return codeMirror.getValue();
		},
		setSql: function (sql) {
			codeMirror.setValue(sql);
		},
		setCursorPosition: function (pos, col, line) {
			this.focus();
			codeMirror.setCursor(line - 1, col - 1, { scroll: true });
		},
		focus: function () {
			codeMirror.focus();
		},
		onChange: function (callback) {
			this.changeCallback = callback;
			codeMirror.on('change', this.changeCallback);
		},
		remove: function () {
			codeMirror.off('change', this.changeCallback);
			this.element.remove();
		}
	});
});
validateExpression

Parses SQL expression on the server.

Parsing of an invalid SQL expression and logging the result.
AQB.Web.QueryBuilder.validateExpression('Max(id) ; (', function(res, errorText) {
    console.log(res);
    console.log(errorText);
});
validateCondition

Parses logical SQL expression on the server.

getProcedureParameters

Allows overriding the default dialog to enter stored procedure parameters. It is fired on adding a stored procedure to the query.

getQueryParams

Returns the list of parameters found in the query.

setQueryParamValues

Sets values for parameters found in the query.

addNewCTE

Adds a new named sub-query to the query Common Table Expression.

addSubQuery

Adds a new derived table (subquery in the FROM clause).

addUnionSubQuery

Adds a new SELECT statement to the current sub-query and joins it with existing statements using the UNION set operator.

dispose

Deletes the client controls and clears the server resources. 

Note: if you don't want to free the server resources (suspecting that the client can hold several tabs of the same query), you can pass false to the first parameter.

CanvasComponent object

Control to display the query diagram pane. 

Properties:

Name Description
canvas jQuery DOM element wrapper.
objects Lists jQuery wrappers of Datasource objects on the Canvas.
Filled only when the component is visible on the page.
links Lists Link objects on the Canvas.
Filled only when the component is visible on the page.
dataSourceDtos Lists DTOs of dataSource objects returned from the server.
linkDtos Lists DTOs of link objects returned from the server.
Events The list of available events.

Events:

  • CanvasContextMenuCommand
  • CanvasOnClick
  • CanvasOnEditUserField
  • CanvasOnMoveTable
  • CanvasOnRemoveCTEFromQuery

Methods:

getDataSources

Returns list of all DataSource objects on the Canvas.

getLayout

Returns the DataSourceLayoutDto object which contains information about the datasources layout to send to the server.

redraw

Redraws the links on the Canvas.

refresh

Repaints the whole content of the Canvas. It should be used if the QueryBuilder was initialized being hidden on the page when the component is displayed. If the component is not displayed at the moment, this method does nothing.

Refreshing the initially hidden Canvas on the page when displayed.
        $(document).on('shown.bs.tab', 'a[data-toggle="xxx"]', function (event) {
            var tabName = $(this).attr('data-target');
            if (tabName === '#QueryTab') {
                AQB.Web.QueryBuilder.CanvasComponent.refresh();
            }
        });
hide

Hides the control.

show

Shows the hidden control on the page and updates its state.

DataSource object

An object representing an item in the FROM clause. Might be a database object reference, a derived table, a named query reference (from CTE).

Properties:

Name Description
element jQuery DOM element wrapper.
titleBar TitleBar object representing the datasource header.
toolbar DataSourceToolbar representing the datasource filter toolbar.
fieldsContainer TableFieldsContainer representing the datasource fields list.
Contains TableObjectField objects representing fields.

Methods:

close

Removes a Datasource from the Canvas.

trash

Removes a Datasource from the Canvas. If a Datasource is a named sub-query, removes it from CTE.

select

Focuses a Datasource on the Canvas.

showMenu

Displays the Datasource menu. (behind the sandwich icon)

showToolbar

Displays the filter toolbar.

hideToolbar

Hides the filter toolbar.

getBBox

Returns the Datasource control coordinates on the Canvas.

reCreate

Recreates a DataSource control.

moveToTop

Places a DataSource above the others.

dto

Returns a data transfer object to send data to the server.

checkAllField

Marks all fields as selected.

Checking all fields of the first Datasource on the Canvas.
var canvas = AQB.Web.QueryBuilder.CanvasComponent;
var ds = canvas.getDataSources()[0];
ds.checkAllField(true); // true - check, false - uncheck
checkField

Marks a field with the specified name as selected.

Checking a field in the first Datasource object by its name.
var canvas = AQB.Web.QueryBuilder.CanvasComponent;
var ds = canvas.getDataSources()[0];
ds.checkField('id', true); // true - check, false - uncheck

Link object

An object representing a join line between objects on the Canvas.

Properties:

Name Description
Left Refers to the left part of the link.
Right Refers to the left part of the link.
color Specifies the color of the link line.
graphics LinkGraph object containing the SVG elements to display the link.
Events  

Events:

  • CanvasLinkOnClick

Methods:

draw

Redraws the Link.

dto

Returns a data transfer object to send data to the server.

select

Makes Link focused on the Canvas.

remove

Removes the Link from the Canvas.

Removal of the first Link from the Canvas.
var link = AQB.Web.QueryBuilder.getLinks()[0];
l.remove();
setLeftType

Sets the left join type (inner/outer).

setRightType

Sets the right join type (inner/outer).

Setting the right side of the Link to the Outer type.
var link = AQB.Web.QueryBuilder.getLinks()[0];
link.setRightType(MetaData.JoinType.Outer);

GridComponent object

The object representing the Query Columns List grid control.

Properties:

Name Description
element jQuery DOM element wrapper for the control.
header Reference to the GridHeader object.
Events List of available events.

Events:

  • GridBeforeCustomEditCell
  • GridOnReload

Methods:

getAllRows

Returns all GridRow objects from the Query Columns List except the empty one.

getEmptyRow

Returns the GridRow object for an empty row which always exists at the bottom of the grid.

prependEmptyRow

Adds a new row with empty expression to the top of the list and returns the GridRow object for it.

appendEmptyRow

Adds a new row with empty expression to the bottom of the list and returns the GridRow object for it.

tooltipGetText

Allows overriding a tooltip for grid cells.

findRowByExpression

Returns the GridRow object with the given SQL expression or null if such expression does not exist.

removeRow

Removes the given GridRow from the Query Columns List.

Search and removal of the Query Columns List item by the given SQL expression.
grid = AQB.Web.QueryBuilder.GridComponent;
var row = grid.findRowByExpression('id');
grid.removeRow(row);
toggleGrouping

Inverts the Grouping flag of the Query Columns List.

Inversion of the Grouping flag of the Query Columns List.
grid = AQB.Web.QueryBuilder.GridComponent;
grid.toggleGrouping();
setColumnWidth

Sets the width of a grid column.

Setting the width of the Query Columns Grid's columns in various ways.
grid = AQB.Web.QueryBuilder.GridComponent;
grid.setColumnWidth('expression', '20%');
grid.setColumnWidth('alias', 100);
grid.setColumnWidth('sorting', '100px');

GridHeader object

The object representing the header of the Query Columns List grid control.

Properties:

Name Description
element jQuery DOM element wrapper.
columnList holds the list of grid columns.
colWidths holds the width of grid columns.

Methods:

setColumnWidth(name, width)

Sets the width of the specified column in pixels.

Setting the Expression grid column 300 pixels wide.
grid = AQB.Web.QueryBuilder.GridComponent;
grid.header.setColumnWidth("expression", 300);
getColumnWidth(name)

Gets the width of the specified column in pixels.

GridRow object

An object representing a row in the Query Columns List grid control.

Properties:

Name Description
control jQuery DOM element wrapper.

Methods:

delete

Deletes the row. 

dto

Returns a data transfer object to send data to the server.

isEmpty

Indicates whether this row is an empty row.

isChecked

Indicates whether this row is selected for output. (forms an item in the SELECT list)

getExpression

Returns SQL expression of the row.

getAlias

Returns alias ("Column Name") of the row.

getSorting

Returns the Sorting attribute of the row.

getAggregate

Returns the aggregate function of the row. 

getGrouping

Returns the Grouping flag of the row.

getCondition

Returns condition (value of the "Criteria" cell) of the row.

check

Sets/clears the Output (selected) flag of the row.  

Selecting the grid row with 'id' expression for output.
var grid = AQB.Web.QueryBuilder.GridComponent;
var row = grid.findRowByExpression('id');
row.check(true);
setExpression

Sets SQL expression for the row.

Changing SQL expression for the grid row, finding it by the old SQL expression value.
var grid = AQB.Web.QueryBuilder.GridComponent;
var row = grid.findRowByExpression('id');
row.setExpression('Max(id)');
addExpression

Adds a new row, sets SQL expression for it, and returns the row object to a callback.

Adding a new row with the specified SQL expression, changing alias in a callback.
var newExpression = "CASE WHEN 1=1 THEN 1 ELSE 0 END";
var newAlias = "AAA";
var grid = AQB.Web.QueryBuilder.GridComponent;
grid.addExpression(newExpression, function(r) {
    r.setAlias(newAlias);
});
setAlias

Sets the row alias ("Column name" attribute).

Setting an alias for the grid row with 'id' expression.
var grid = AQB.Web.QueryBuilder.GridComponent;
var row = grid.findRowByExpression('id');
row.setAlias('row_id');
setSorting

Specifies the sorting attribute for the row.

Setting the sorting attribute for the grid row with 'id' expression.
var grid = AQB.Web.QueryBuilder.GridComponent;
var row = grid.findRowByExpression('id');
row.setSorting(AQB.Web.Enum.ItemSortType.Asc);
setAggregate

Specifies aggregate function of the row.

Setting an aggregate function for the grid row with 'id' expression.
var grid = AQB.Web.QueryBuilder.GridComponent;
var row = grid.findRowByExpression('id');
row.setAggregate('Sum');
setGrouping

Sets/clears the grouping flag of the row.

Setting the grouping flag for the grid row with 'id' expression.
var grid = AQB.Web.QueryBuilder.GridComponent;
var row = grid.findRowByExpression('id');
row.setGrouping(true);
setCondition

Sets condition (value of the "Criteria" cell) for the row.

Setting the condition for the grid row with 'id' expression.
var grid = AQB.Web.QueryBuilder.GridComponent;
var row = grid.findRowByExpression('id');
row.setCondition('is not null');

TreeViewComponent object

The object representing the Database Schema View control.

Properties:

Name Description
element jQuery DOM element wrapper.
filter The value entered to the filter edit box.

Methods:

setFilter

Specifies and applies the new filter value for the tree.

clearFilter

Clears the filter and restores the unfiltered state.

tooltipGetText

Allows overriding the default text displayed in the tooltip for nodes of the tree.

Generation of the custom tooltip text for nodes of the Database Schema Tree.
AQB.Web.QueryBuilder.TreeViewComponent.tooltipGetText = function (item) {
	return item.fullName + ' (' + item.typeStr + ')';
}

UserQueriesComponent object

The object representing the Reusable Queries control which lets end-users save, manage and reuse their SQL queries.

Properties:

Name Description
element jQuery DOM element wrapper.
Events List of available events.

Events:

  • OnCreateFolder
  • OnCreateUserQuery
  • OnEdit
  • OnRemove
  • OnRename
  • OnSaveUserQuery

Methods:

on

Binds a handler to the event.

Subscription to the Delete button click event in the Reusable Queries control.
AQB.Web.QueryBuilder.UserQueriesComponent.on(AQB.Web.QueryBuilder.UserQueriesComponent.Events.OnRemove, function (e, options) {
     log(options);
});

EditorComponent object

The object representing the SQL Text Editor control.

Properties:

Name Description
element jQuery DOM element wrapper.
buttonContainer jQuery DOM wrapper for the element with the 'Go to error position', 'Clear query', 'Get back to the previous query' buttons and the parsing error message.

Methods:

getSql

Returns the text from the editor.

setSql

Sets new text to the editor.

setCursorPosition

Moves cursor to the specified position.

focus

Moves focus to the editor.

remove

Deletes the control.

StatusBarComponent object

The object representing the Status Bar control which warns the user about inconsistent query states and reports about errors.

Properties:

Name Description
element jQuery DOM element wrapper.

Methods:

messageInfo

Shows an informational message to the user.

messageWarning

Shows warning message to the user. 

messageError

Shows error message to the user. 

messageText

Shows message of the specified type to the user. 

Displaying the informational and error messages in the status bar.
var statusbar = AQB.Web.QueryBuilder.StatusBarComponent;
statusbar.messageInfo('QueryBuilder has loaded');
statusbar.messageText('Something has happened!!!', 'error');
show

Displays the control on the page.

hide

Hides the control on the page.

NavBarComponent object

The object representing the Query Navigation Bar. Contains the Query Structure Tree button, the Breadcrumbs Bar, the Union Navigation Bar, and the toolbar to add new sub-queries of different types. The two latter elements reside on the second row which is displayed on hover.

Properties:

Name Description
control jQuery DOM element wrapper.
treeStructure TreeStructure object representing the Query Tree Structure popup control.
breadcrumbs Breadcrumbs object representing the Breadcrumbs control.
unionPanel UnionPanel object representing the Union Navigation Bar.
Events List of available events.

Events:

  • BreadCrumbSelectNode
  • NavBarAction
  • TreeStructureSelectNode

Methods:

disableUnions

Disables the possibility to work with set operators. (hides the Union Navigation Bar)

disableCte

Disables the possibility to add named sub-queries to the Common Table Expression.

AQB.Web.CriteriaBuilder object

The object representing the SQL Filter Builder control.

Remarks

Criteria Builder is not a part of the Query Builder component itself. It allows editing conditions applied to the query by the Query Transformer server-side object.

Criteria Builder must be initialized separately on both the client and the server sides.

Initialization

When you use both QueryBuilder and CriteriaBuilder objects on the same page, initialized with the same id (AQB.Web.UI.QueryBuilder(qbId), AQB.Web.UI.CriteriaBuilder(qbId)), changes in the Query Builder are automatically passed to the Criteria Builder, but if they have different ids, synchronization must be initialized manually.

Updating the list of query columns on changing the query in the QueryBuilder
AQB.Web.onQueryBuilderReady(function (qb) {
    qb.on(qb.Events.SqlChanged, function () {
        AQB.Web.CriteriaBuilder.loadColumns();
    });
});

It is not necessary to subscribe to this event to update the columns list. You can call the loadCoumns method on switching to the Query Results tab, on a button click, etc.

Displaying the result query data to the user

Columns retrieval

After the Query Builder gets updated and the list of query output columns changes, the AfterSyncCriteriaBuilder event is fired. You can handle it to update the list of columns in the result data grid.

Updating the list of columns from the Query Builder
AQB.Web.onCriteriaBuilderReady(function (cb) {
    cb.on(cb.Events.AfterSyncCriteriaBuilder, function () {
        updateGridColumns(cb.Columns); // your method to update grid columns       
    });
});
Data retrieval

To retrieve data when the user changes the filter in CriteriaBuilder, subscribe to the CriteriaBuilderChanged event.

Requesting data from the server on changing conditions in the CriteriaBuilder
AQB.Web.onCriteriaBuilderReady(function (cb) {
    cb.on(cb.Events.CriteriaBuilderChanged, function () {
        cb.transformSql(function () {
                getData(); // your method to request data from server
            });        
    });
});

Properties:

Name Description
element jQuery DOM element wrapper.
SessionID HTTP session identifier.
Columns List of columns from the original SQL query.
SQL Result SQL query text.
AllowCustomLogicalSQLExpressions Allows input of arbitrary SQL expressions.
rootJunctionPrefix The prefix of the root junction caption. Default: "Where".
junctionPostfix Postfix of all junction captions. Default: "of the following succeed".
showPrefixes Prescribes whether to show prefixes for conditions ("or", "and").
Events List of available events.

Events:

  • AfterSyncCriteriaBuilder

  • CriteriaBuilderChanged

Subscription to the CriteriaBuilder events is possible in the AQB.Web.onCriteriaBuilderReady method.

Methods:

on

Binds a handler to the event.

Subscription to the after Criteria Builder synchronization finished event.
AQB.Web.CriteriaBuilder.on(AQB.Web.CriteriaBuilder.Events.AfterSyncCriteriaBuilder, function(e, cb) {
    console.log(cb.Columns);
})
isValid

Indicates if there aren't any invalid conditions values exist.

clear

Clears all conditions.

loadColumns

(Re)loads the original query columns.

transformSql

Sends conditions to the server and gets the transformed query text.

Send conditions to the server and retrieve the modified SQL query.
var cb = AQB.Web.CriteriaBuilder;
cb.transformSql(function(sql) {
    console.log(sql);
})
addCondition

Adds new condition for the column.

Adding a new condition to the first column of the original query.
var cb = AQB.Web.CriteriaBuilder;
var column = cb.Columns[0];
cb.addCondition(column, 'is equal to', '1');
addGeneralCondition

Adds general condition.

Adding a new condition by logical SQL expression.
var cb = AQB.Web.CriteriaBuilder;
cb.addGeneralCondition('1 != 1');
addGroup

Adds a new condition group.

Adding a group of conditions joined with the "OR" logical operator.
var cb = AQB.Web.CriteriaBuilder;
cb.addGroup('any');

AQB.Web.Core module

Note:

Methods of AQB.Web.Core module does not immediately apply changes to the query. Changes must be explicitly sent to the server via the sendDataToServer() method call.

Events:

  • AfterCustomEditCell
  • ContextMenuReceived
  • DataReceived
  • DataSending
  • QueryStructureChanged
  • SQLEErrorReceived
  • SyncFinished
  • UserDataReceived
  • UserQueriesReceived

Events handling:

on

Binds a handler to an event.

code sample of subscription to the DataReceived event
QB.Web.Core.on(QB.Web.Core.Events.DataReceived, function (e, data) {
    //ExchangeObject
    console.log(data);
});

The ExchangeObject is an object that is used to exchange data about changes in the query between client and server. We do not recommend to modify it manually, doing so may lead to unpredictable consequences.

removeListener

Unbinds a handler from the event.

code sample of a subscription cancellation
QB.Web.Core.removeListener(AQB.Web.Core.Events.DataReceived, yourHandler);
Events

Returns the list of events in the AQB.Web.Core module.

printing the list of QB.Web.Core events to the console
console.log(AQB.Web.Core.Events);
updateSQL

Replaces the SQL text query with the new one.

specify new SQL query text
AQB.Web.Core.updateSQL('Select 1')
AQB.Web.Core.sendDataToServer()

Data exchange:

setUserData

Prepares custom data to send from the client to the server.

send custom data to server example
AQB.Web.Core.setUserData({ message: 'awesome message' });
AQB.Web.Core.sendDataToServer();

To receive this data on the server, handle the QueryBuilder.UserDataReceived event.

retrieval of custom data from the client on the server
qb.UserDataReceived += (builder, args) =>
{
   //builder - current instance of the QueryBuilder on the server
   //args - data received from client
};

SQL query manipulations:

The following methods let manipulate with query elements of the currently active (visible to the end-user) sub-query.

1. Working with datasources in the current sub-query

addDataSource

Adds new datasource to the current sub-query.

Adding new datasource to the query
var dto = new AQB.Web.Dto.DataSourceDto();
dto.Name = "Customers"
AQB.Web.Core.addDataSource(dto);
updateDataSource

Edits existing datasource in the current sub-query.

Specifying an alias for the first datasource in the current sub-query.
var ds = AQB.Web.QueryBuilder.getDataSources()[0];
var dto = ds.dto();
dto.Alias = "NewAlias";
AQB.Web.Core.updateDataSource(dto);
AQB.Web.Core.sendDataToServer();
removeDataSource

Deletes a datasource from the current sub-query.

Deletion of the first datasource in the current sub-query.
var ds = AQB.Web.QueryBuilder.getDataSources()[0]
var dto = ds.dto()
AQB.Web.Core.removeDataSource(dto)
AQB.Web.Core.sendDataToServer()

 

2. Working with the links between datasources in the current sub-query

addLink

Adds a new link between datasources in the current sub-query.

Addition of a link between first and second datasources in the current sub-query
var dto = new AQB.Web.Dto.DataSourceLinkDto();
var left = new AQB.Web.Dto.DataSourceLinkPartDto();
var right = new AQB.Web.Dto.DataSourceLinkPartDto();

var dataSources = AQB.Web.QueryBuilder.getDataSources()

left.DatasourceGuid = dataSources[0].dto().Guid;
left.FieldName = "AddressID";

right.DatasourceGuid = dataSources[1].dto().Guid;
right.FieldName = "AddressTypeID";

dto.Left = left;
dto.Right = right;

AQB.Web.Core.addLink(dto);
AQB.Web.Core.sendDataToServer()
updateLink

Changes properties of the link between datasources in the current sub-query.

Changing the link type to LEFT OUTER JOIN for the first link in the current sub-query
var link = AQB.Web.QueryBuilder.getLinks()[0]
var dto = link.dto()
dto.Left.Type = AQB.Web.Enum.LinkSideType.Outer
AQB.Web.Core.updateLink(dto)
AQB.Web.Core.sendDataToServer()
removeLink

Deletes the link between datasources in the current sub-query.

Deletion of the link between datasources in the current sub-query.
var link = AQB.Web.QueryBuilder.getLinks()[0]
var dto = link.dto()
AQB.Web.Core.removeLink(dto)
AQB.Web.Core.sendDataToServer()

 

3. Working with the links between datasources in the current sub-query

addGridRow

Adds a new row to the Query Columns Grid in the current sub-query.

Addition of a row with the table field expression to the current sub-query
var dto = new AQB.Web.Dto.GridRowDto()
dto.Expression = "HumanResources.Employee.EmployeeID"
AQB.Web.Core.addGridRow(dto)
AQB.Web.Core.sendDataToServer()
addGridRows

Adds multiple rows to the Query Columns Grid in the current sub-query.

Addition of two rows to the Query Columns Grid in the current sub-query
var dto1 = new AQB.Web.Dto.GridRowDto();
dto1.Expression = "1";
var dto2 = new AQB.Web.Dto.GridRowDto();
dto2.Expression = "2";
AQB.Web.Core.addGridRows([dto1, dto2]);
AQB.Web.Core.sendDataToServer();
updateGridRow

Updates the existing row in the Query Columns Grid in the current sub-query.

Setting grouping by the first row of the Query Columns Grid in the current sub-query
var row = AQB.Web.QueryBuilder.getQueryColumnList()[0];
var dto = row.dto();
dto.Grouping = true;
AQB.Web.Core.updateGridRow(dto);
AQB.Web.Core.sendDataToServer();
updateGridRows

Updates several rows in the Query Columns Grid in the current sub-query.

Specify sorting by the first and second row of the Query Columns Grid in the current sub-query
var row1 = AQB.Web.QueryBuilder.getQueryColumnList()[0];
var dto1 = row.dto();
dto1.SortOrder = 1;
var row2 = AQB.Web.Application.getQueryColumnList()[1];
var dto2 = row.dto();
dto2.SortOrder = 2;
AQB.Web.Core.updateGridRows([dto1, dto2]);
AQB.Web.Core.sendDataToServer();
removeGridRow

Deletes a row from the Query Columns Grid in the current sub-query.

Deletion of the first row from the Query Columns Grid in the current sub-query.
var row = AQB.Web.QueryBuilder.getQueryColumnList()[0];
var dto = row.dto();
AQB.Web.Core.removeGridRow(dto);
AQB.Web.Core.sendDataToServer();
removeGridRows

Removes several rows from the Query Columns Grid in the current sub-query.

Deletion of the two first rows from the Query Columns Grid in the current sub-query.
var row1 = AQB.Web.QueryBuilder.getQueryColumnList()[0];
var dto1 = row1.dto();
var row2 = AQB.Web.Application.getQueryColumnList()[1];
var dto2 = row2.dto();
AQB.Web.Core.removeGridRows([dto1, dto2]);
AQB.Web.Core.sendDataToServer();

Is this article helpful for you?