Differences

This shows you the differences between two versions of the page.

--- easyquery:js:querypanel-widget [2014/10/14 19:57]
korzh
+++ easyquery:js:querypanel-widget [2015/07/27 12:32] (current)
@@ Line 1: / Line 1: @@
 ====== QueryPanel widget ======
-<jxd:widgetSummary>This widget represents “query panel” - a rectangular area of your web-page which contains hierarchical list of query conditions\\
+<jxd:widgetSummary>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.\\
+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.\\
+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.</jxd:widgetSummary>
+Of course you can also set options and call methods of **QueryPanel** in an usual for jQuery widgets way.</jxd:widgetSummary>
-<jxd:widgetExample>Here is an example how to set QueryPanel options when you initialize easyQuerySettings variable:
+<jxd:widgetExample>Here is an example how to set **QueryPanel** options when you initialize ''easyQuerySettings'' variable:
 <code>
 window.easyQuerySettings = {
-serviceUrl: "/EasyQuery",
+    serviceUrl: "/EasyQuery",
-modelName: "YourModelName", //put the name of your model here
+    modelName: "YourModelName", //put the name of your model here
-.   .   .   .   .   .   .
+    .   .   .   .   .   .   .
-queryPanel: {
+    queryPanel: {
-showCheckBoxes: true,
+        showCheckBoxes: true,
-attrElementFormat: "{attr}", //show only attribute instead of "{entity} {attr}" format used by default.
+        attrElementFormat: "{attr}", //show only attribute instead of "{entity} {attr}" format used by default.
-.   .   .   .   .   .
+        .   .   .   .   .   .
+    }
+    .   .   .   .   .   .
+}
+</code>
+An example of seting some **QueryPanel** option in code using ''option'' method:
+<code>
+var QPDiv = $('#QueryPanel');
+if (QPDiv.length &gt; 0) {
+   QPDiv.QueryPanel("option", "showRootRow", false);
 }
-.   .   .   .   .   .
 </code></jxd:widgetExample>
-<jxd:widgetNotes>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:\\
+<jxd:widgetNotes>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:
-. Define a placeholder\\
+\\
+. Define a placeholder
 <code>
-<div id="QueryPanel"></div>;;
+  <div id="QueryPanel"></div>
 </code>
-. Include eq.all.min.js and eq.view.js on your page (after jQuery and jQuery UI):</jxd:widgetNotes>
+. Include ''eq.all.min.js'' and ''eq.view.js'' on your page (after jQuery and jQuery UI).</jxd:widgetNotes>
 ===== Options =====
-==== listRequestHandler ====
-<jxd:option>
-<jxd:optionType>Function</jxd:optionType>
-<jxd:optionDefault>null</jxd:optionDefault>
-<jxd:optionSummary>Sets a callback function which returns lists for "CustomList" value editors</jxd:optionSummary>
-<jxd:optionExample>
-var QPDiv = $('#QueryPanel');
-QPDiv.QueryPanel("listRequestHandler, function(listName, onResult){
-if (listName == "RegionList") {
-onResult([
-{ id: "CA", text: "California" },
-{ id: "CO", text: "Colorado" },
-{ id: "OR", text: "Oregon" },
-{ id: "WA", text: "Washington"}
-]);
-}
-else {
-onResult(null);
-}
-});
-</jxd:optionExample>
-</jxd:option>
 ==== showRootRow ====
@@ Line 73: / Line 58: @@
 <jxd:optionType>Boolean</jxd:optionType>
 <jxd:optionDefault>false</jxd:optionDefault>
-<jxd:optionSummary>Gets or sets a value indicating whether query panel must show a checkbox at the beginning of each condition row.\\
+<jxd:optionSummary>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</jxd:optionSummary>
 </jxd:option>
@@ Line 90: / Line 75: @@
 <jxd:optionType>Boolean</jxd:optionType>
 <jxd:optionDefault>false</jxd:optionDefault>
-<jxd:optionSummary>If true QueryPanel widget will always show button in predicate (group) rows.\\
+<jxd:optionSummary>If true QueryPanel widget will always show button in predicate (group) rows.
 Instead of default behaviour when they are shown only on mouse over.</jxd:optionSummary>
 </jxd:option>
@@ Line 99: / Line 84: @@
 <jxd:optionType>Boolean</jxd:optionType>
 <jxd:optionDefault>false</jxd:optionDefault>
-<jxd:optionSummary>If true QueryPanel widget will always show button in condition rows.\\
+<jxd:optionSummary>If true QueryPanel widget will always show button in condition rows.
 Instead of default behaviour when they are shown only on mouse over.</jxd:optionSummary>
 </jxd:option>
@@ Line 131: / Line 116: @@
 <jxd:option>
 <jxd:optionType>String</jxd:optionType>
-<jxd:optionDefault>mm/dd/yy</jxd:optionDefault>
+<jxd:optionSummary>A string that represents the format of date values used in date/time picker widget.
-<jxd:optionSummary>A string that represents the format of date values used in date/time picker widget.</jxd:optionSummary>
+For a full list of the possible formats see documention for JQuery UI Datepicker Widget: http://api.jqueryui.com/datepicker/#utility-formatDate</jxd:optionSummary>
 </jxd:option>
@@ Line 140: / Line 125: @@
 <jxd:optionType>String</jxd:optionType>
 <jxd:optionDefault>d MM, yy</jxd:optionDefault>
-<jxd:optionSummary>The format of date values used in condition rows.</jxd:optionSummary>
+<jxd:optionSummary>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</jxd:optionSummary>
 </jxd:option>
@@ Line 148: / Line 134: @@
 <jxd:optionType>String</jxd:optionType>
 <jxd:optionDefault>{entity} {attr}</jxd:optionDefault>
-<jxd:optionSummary>The format of entity attributes used in query panel conditions.\\
+<jxd:optionSummary>The format of entity attributes used in query panel conditions.
 You can set it to '{attr}' to shown only attribute part (without entity name)</jxd:optionSummary>
 </jxd:option>
-==== menuSearchBoxAfter ====
+==== menuOptions ====
 <jxd:option>
-<jxd:optionType>Number</jxd:optionType>
+<jxd:optionType>Object</jxd:optionType>
-<jxd:optionDefault>30</jxd:optionDefault>
+<jxd:optionSummary>Contains different options for popup menu that appears for selecting attributes, operators or values in condition.\\
-<jxd:optionSummary>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</jxd:optionSummary>
+Includes the following sub-options:</jxd:optionSummary>
+<jxd:props>
+<jxd:prop>
+<jxd:propName>showSearchBoxAfter</jxd:propName>
+<jxd:propType>integer</jxd:propType>
+<jxd:propDefault>30</jxd:propDefault>
+<jxd:propSummary>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</jxd:propSummary>
+</jxd:prop>
+<jxd:prop>
+<jxd:propName>activateOnMouseOver</jxd:propName>
+<jxd:propType>boolean</jxd:propType>
+<jxd:propDefault>true</jxd:propDefault>
+<jxd:propSummary>If true  - the row in query panel will be highlighted when user moves mouse cursor over it.</jxd:propSummary>
+</jxd:prop>
+</jxd:props>
+</jxd:option>
+==== subQueryDialogWidth ====
+<jxd:option>
+<jxd:optionType>Integer</jxd:optionType>
+<jxd:optionDefault>600</jxd:optionDefault>
+<jxd:optionSummary>Sets or gets the width of sub-query dialog</jxd:optionSummary>
+</jxd:option>
+==== subQueryDialogHeight ====
+<jxd:option>
+<jxd:optionType>Integer</jxd:optionType>
+<jxd:optionDefault>300</jxd:optionDefault>
+<jxd:optionSummary>Sets or gets the height of sub-query dialog</jxd:optionSummary>
+</jxd:option>
+==== dialogZIndex ====
+<jxd:option>
+<jxd:optionType>Integer</jxd:optionType>
+<jxd:optionDefault>100000</jxd:optionDefault>
+<jxd:optionSummary>Sets or gets the ZIndex property of the different dialogs used in QueryPanel (including the sub-query dialog)</jxd:optionSummary>
+</jxd:option>
+==== numberDecimalSeparatorDisplay ====
+<jxd:option>
+<jxd:optionType>String</jxd:optionType>
+<jxd:optionDefault>.</jxd:optionDefault>
+<jxd:optionSummary>Sets or gets the symbol which is used as decimal separator</jxd:optionSummary>
+</jxd:option>
+==== numberListSeparators ====
+<jxd:option>
+<jxd:optionType>List</jxd:optionType>
+<jxd:optionDefault>[',', ';']</jxd:optionDefault>
+<jxd:optionSummary>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).</jxd:optionSummary>
+</jxd:option>
+==== autoEditNewCondition ====
+<jxd:option>
+<jxd:optionType>Boolean</jxd:optionType>
+<jxd:optionDefault>false</jxd:optionDefault>
+<jxd:optionSummary>If true the QueryPanel will automaticall show value editor for any new (just added) condition.</jxd:optionSummary>
 </jxd:option>
@@ Line 168: / Line 218: @@
 <jxd:functionSummary>Clears the list of conditions in associated query and redraws a panel if needed</jxd:functionSummary>
 <jxd:functionExample>
-var QueryPanelDiv = $("#QueryPanel");
+    var QueryPanelDiv = $("#QueryPanel");
-QueryPanelDiv.QueryPanel('clearConditions');
+    QueryPanelDiv.QueryPanel('clearConditions');
 </jxd:functionExample>
 </jxd:function>
@@ Line 178: / Line 228: @@
 <jxd:functionSummary>Clears all parts (list of conditions, list of columns) in associated query and redraws a panel if needed</jxd:functionSummary>
 <jxd:functionExample>
-var QueryPanelDiv = $("#QueryPanel");
+    var QueryPanelDiv = $("#QueryPanel");
-QueryPanelDiv.QueryPanel('clearQuery');
+    QueryPanelDiv.QueryPanel('clearQuery');
 </jxd:functionExample>
 </jxd:function>
@@ Line 186: / Line 236: @@
 <jxd:function>
-<jxd:functionSummary>Turns the row for condition passed in parameter into "edit" mode.\\
+<jxd:functionSummary>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.</jxd:functionSummary>
 <jxd:functionExample>
-var QueryPanelDiv = $("#QueryPanel");
+    var QueryPanelDiv = $("#QueryPanel");
-QueryPanelDiv.QueryPanel('editConditionValue');
+    QueryPanelDiv.QueryPanel('editConditionValue');
 </jxd:functionExample>
 </jxd:function>
@@ Line 197: / Line 247: @@
 <jxd:function>
-<jxd:functionSummary>Creates a new simple condition with attribute and operator based on their IDs passed in parameters\\
+<jxd:functionSummary>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.</jxd:functionSummary>
 <jxd:params>
@@ Line 212: / Line 262: @@
 </jxd:params>
 <jxd:functionExample>
-var QueryPanelDiv = $("#QueryPanel");
+    var QueryPanelDiv = $("#QueryPanel");
-QueryPanelDiv.QueryPanel('addNewCondition', 'Orders.Paid', 'IsTrue');
+    QueryPanelDiv.QueryPanel('addNewCondition', 'Orders.Paid', 'IsTrue');
 </jxd:functionExample>
 </jxd:function>

Differences

Page Tools