Knowledge Base
Back to
Latest changes:

Table of Contents

QueryPanel widget

This widget represents “query panel” - a rectangular area of your web-page which contains hierarchical list of query conditions and provides some operations for manipulating with that list: add a new condition or condition group, remove an existing condition, enable/disable conditions, etc. All options of QueryPanel widgets can be set through queryPanel property of easyQuerySettings global variable. Of course you can also set options and call methods of QueryPanel in an usual for jQuery widgets way.
Code examples:
Here is an example how to set QueryPanel options when you initialize easyQuerySettings variable: 

window.easyQuerySettings = {
    serviceUrl: "/EasyQuery",
    modelName: "YourModelName", //put the name of your model here
    .   .   .   .   .   .   .
    queryPanel: {
        showCheckBoxes: true,
        attrElementFormat: "{attr}", //show only attribute instead of "{entity} {attr}" format used by default.
        .   .   .   .   .   .
    }
    .   .   .   .   .   .
}

An example of seting some QueryPanel option in code using option method: 

var QPDiv = $('#QueryPanel');
if (QPDiv.length > 0) {
   QPDiv.QueryPanel("option", "showRootRow", false);
}

Note:If you include eq.view.js script on your page then this widget (as well as ColumnsPanel and EntitiesPanel) is initilized implicitly (on page load) for all DOM elements with id “QueryPanel”. So all you need to do to add on your page is:
1. Define a placeholder 

  <div id="QueryPanel"></div>

2. Include eq.all.min.js and eq.view.js on your page (after jQuery and jQuery UI).

Options

showRootRow

Type:Boolean
Default:true
Gets or sets a value indicating whether query panel must show a root row which represents the main group of conditions

showAddRow

Type:Boolean
Default:true
Gets or sets a value indicating whether query panel must show a special [add condition] link at the bottom

showCheckboxes

Type:Boolean
Default:false
Gets or sets a value indicating whether query panel must show a checkbox at the beginning of each condition row. User will be able to use these checkboxes to enable/disable corresponding query conditions

showPoweredBy

Type:Boolean
Default:true
Allows to turn off “Powered by EasyQuery” link shown in the bottom right cornder of query panel. Works only in the full version of the script.

alwaysShowButtonsInPredicates

Type:Boolean
Default:false
If true QueryPanel widget will always show button in predicate (group) rows. Instead of default behaviour when they are shown only on mouse over.

alwaysShowButtonsInConditions

Type:Boolean
Default:false
If true QueryPanel widget will always show button in condition rows. Instead of default behaviour when they are shown only on mouse over.

showConjunctions

Type:Boolean
Default:true
If true QueryPanel widget will show conjunction elements (“and” or “or”) at the beginning of each condition.

accentActiveCondition

Type:Boolean
Default:true
If true the active condition (the one user clicked on previously) will have accent background color.

activateRootOnStart

Type:Boolean
Default:true
If true root predicate row become active at the beginning.

dateFormatValue

Type:String
A string that represents the format of date values used in date/time picker widget. For a full list of the possible formats see documention for JQuery UI Datepicker Widget: http://api.jqueryui.com/datepicker/#utility-formatDate

dateFormatDisplay

Type:String
Default:d MM, yy
The format of date values used in condition rows. For a full list of the possible formats see documention for JQuery UI Datepicker Widget: http://api.jqueryui.com/datepicker/#utility-formatDate

attrElementFormat

Type:String
Default:{entity} {attr}
The format of entity attributes used in query panel conditions. You can set it to '{attr}' to shown only attribute part (without entity name)

Type:Object
Contains different options for popup menu that appears for selecting attributes, operators or values in condition.
Includes the following sub-options:
showSearchBoxAfter
Type:integer
Default:30
If the number of items in drop down menu exceeds this number then a search box will be displayed. Set this option to 0 if want to show the search box in any case
activateOnMouseOver
Type:boolean
Default:true
If true - the row in query panel will be highlighted when user moves mouse cursor over it.

subQueryDialogWidth

Type:Integer
Default:600
Sets or gets the width of sub-query dialog

subQueryDialogHeight

Type:Integer
Default:300
Sets or gets the height of sub-query dialog

dialogZIndex

Type:Integer
Default:100000
Sets or gets the ZIndex property of the different dialogs used in QueryPanel (including the sub-query dialog)

numberDecimalSeparatorDisplay

Type:String
Default:.
Sets or gets the symbol which is used as decimal separator

numberListSeparators

Type:List
Default:[',', ';']
Sets or gets the symbols which are recognized as list items separators (for example when user is supposed to enter a list of values in a text box).

autoEditNewCondition

Type:Boolean
Default:false
If true the QueryPanel will automaticall show value editor for any new (just added) condition.

Methods

clearConditions

Clears the list of conditions in associated query and redraws a panel if needed
Code examples:

  var QueryPanelDiv = $("#QueryPanel");
  QueryPanelDiv.QueryPanel('clearConditions');

clearQuery

Clears all parts (list of conditions, list of columns) in associated query and redraws a panel if needed
Code examples:

  var QueryPanelDiv = $("#QueryPanel");
  QueryPanelDiv.QueryPanel('clearQuery');

editConditionValue

Turns the row for condition passed in parameter into “edit” mode. If no parameter is passed then it switch on edit mode for current active row.
Code examples:

  var QueryPanelDiv = $("#QueryPanel");
  QueryPanelDiv.QueryPanel('editConditionValue');

addNewCondition

Creates a new simple condition with attribute and operator based on their IDs passed in parameters and then adds this new condition into the root predicate.
Parameters:
attrid
Type:String
Attribute ID. By default attribute ID is equals to TableName.FieldName of corresponding column.
operid
Type:String
Operator ID (e.g. 'Equals', 'StartsWith', etc).
Code examples:

  var QueryPanelDiv = $("#QueryPanel");
  QueryPanelDiv.QueryPanel('addNewCondition', 'Orders.Paid', 'IsTrue');

setActiveConditionWidget

Activates the particular condition in the panel
Parameters:
conditionWidget
Type:Object
The ConditionRow_SMPL or ConditionRow_PDCT object to activate.

Discussion

, 2015/05/29 15:41
How to show this QueryPanel more than once in my page?
, 2015/05/31 12:02
It's possible but it will not be rather simple.
By default all EasyQuery widgets are connected to default Query object created automatically during initialization (the one you can get using EQ.client.getQuery() function).
To place second QueryPanel on your page you will need to create one more Query object "manually" and connect it with that QueryPanel.

May I ask why you need to QueryPanel object on your page?
, 2015/06/01 08:58
Can you please help me to connect the QueryPanel with the Query object
, 2015/06/01 12:04
We are writing an article about this subject and will publish it soon.
However, you still didn't describe why you need to build 2 queries (filters) on one page.
, 2016/06/20 18:17
Hello was this article ever written? We have a use case where a user can combine multiple queries to get results.
, 2016/06/21 16:39
Have you finished writing this article?
, 2016/11/21 23:09
I'm trying to use EQ in a C# MVC app. The queries work fine. The problem I have is that the modal dialogs for load/save query are not rendering properly. I think because I am using the AdminLTE layout template (link below). Do you know what the problem may be?
https://almsaeedstudio.com/themes/AdminLTE/index2.html
, 2017/04/04 10:35
Can you please let me know how we execute user written query that direct copy paste in SQL query panel
, 2017/04/04 10:37
Can you please let me know how we execute user written query that direct copy paste in SQL panel.
Enter your comment:
 

Page Tools

(c) Copyright 1998-2014 Korzh.com. All rights reserved.