This shows you the differences between two versions of the page.
| — |
easyquery:js:columnspanel-widget [2015/07/27 12:32] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | |||
| + | ====== ColumnsPanel widget ====== | ||
| + | <jxd:widgetSummary>This widget represents "columns panel" - a rectangular area of your web-page which contains the list of query result columns | ||
| + | and provides some operations for manipulating with that list: add/remove a column, change its type, set column's sorting, etc.\\ | ||
| + | All options of **ColumnsPanel** widgets can be set through ''columnsPanel'' property of ''easyQuerySettings'' global variable. | ||
| + | Of course you can also set options and call methods of **ColumnsPanel** in an usual for jQuery widgets way.</jxd:widgetSummary> | ||
| + | <jxd:widgetExample>Here is an example how to set **ColumnsPanel** options when you initialize ''easyQuerySettings'' variable: | ||
| + | <code> | ||
| + | window.easyQuerySettings = { | ||
| + | serviceUrl: "/EasyQuery", | ||
| + | modelName: "YourModelName", //put the name of your model here | ||
| + | . . . . . . . | ||
| + | columnsPanel: { | ||
| + | allowAggrColumns: true, | ||
| + | attrElementFormat: "{attr}", //show only attribute instead of "{entity} {attr}" format used by default. | ||
| + | showColumnCaptions: true, | ||
| + | . . . . . . | ||
| + | } | ||
| + | . . . . . . | ||
| + | } | ||
| + | </code> | ||
| + | An example of seting some **ColumnsPanel** option in code using ''option'' method: | ||
| + | <code> | ||
| + | var QCDiv = $('#QueryColumn'); | ||
| + | if (QCDiv.length > 0) { | ||
| + | QCDiv.ColumnsPanel("option", "showHeader", false) | ||
| + | } | ||
| + | </code></jxd:widgetExample> | ||
| + | <jxd:widgetNotes>If you include ''eq.view.js'' script on your page then this widget (as well as **QueryPanel** and **EntitiesPanel**) is initilized implicitly (on page load) for all DOM elements with id "ColumnsPanel". So all you need to do to add on your page is:\\ | ||
| + | \\ | ||
| + | 1. Define a placeholder | ||
| + | <code> | ||
| + | <div id="ColumnsPanel"></div> | ||
| + | </code> | ||
| + | 2. Include ''eq.all.min.js'' and ''eq.view.js'' on your page (after jQuery and jQuery UI).</jxd:widgetNotes> | ||
| + | |||
| + | ===== Options ===== | ||
| + | |||
| + | |||
| + | ==== showAddRow ==== | ||
| + | |||
| + | <jxd:option> | ||
| + | <jxd:optionType>Boolean</jxd:optionType> | ||
| + | <jxd:optionDefault>true</jxd:optionDefault> | ||
| + | <jxd:optionSummary>Gets or sets a value indicating whether columns panel must show a special [add column] link at the bottom</jxd:optionSummary> | ||
| + | </jxd:option> | ||
| + | |||
| + | ==== showHeader ==== | ||
| + | |||
| + | <jxd:option> | ||
| + | <jxd:optionType>Boolean</jxd:optionType> | ||
| + | <jxd:optionDefault>true</jxd:optionDefault> | ||
| + | <jxd:optionSummary>Gets or sets a value indicating whether columns panel must show a header at the top</jxd:optionSummary> | ||
| + | </jxd:option> | ||
| + | |||
| + | ==== showColumnCaptions ==== | ||
| + | |||
| + | <jxd:option> | ||
| + | <jxd:optionType>Boolean</jxd:optionType> | ||
| + | <jxd:optionDefault>true</jxd:optionDefault> | ||
| + | <jxd:optionSummary>Gets or sets a value indicating whether columns panel must show an editable caption for each column (i.e. "SELECT ColumnName AS ColumnCaption...")</jxd:optionSummary> | ||
| + | </jxd:option> | ||
| + | |||
| + | ==== allowAggrColumns ==== | ||
| + | |||
| + | <jxd:option> | ||
| + | <jxd:optionType>Boolean</jxd:optionType> | ||
| + | <jxd:optionDefault>true</jxd:optionDefault> | ||
| + | <jxd:optionSummary>Gets or sets a value indicating whether columns panel allows user to use aggregated columns</jxd:optionSummary> | ||
| + | </jxd:option> | ||
| + | |||
| + | ==== allowSorting ==== | ||
| + | |||
| + | <jxd:option> | ||
| + | <jxd:optionType>Boolean</jxd:optionType> | ||
| + | <jxd:optionDefault>true</jxd:optionDefault> | ||
| + | <jxd:optionSummary>Gets or sets a value indicating whether columns panel allows user to set columns sorting</jxd:optionSummary> | ||
| + | </jxd:option> | ||
| + | |||
| + | ==== attrElementFormat ==== | ||
| + | |||
| + | <jxd:option> | ||
| + | <jxd:optionType>String</jxd:optionType> | ||
| + | <jxd:optionDefault>'{entity} {attr}'</jxd:optionDefault> | ||
| + | <jxd:optionSummary>Gets or sets the format of the attribute display name. '{entity}' is replaced with entity name, '{attr}' is replaced with attribute name</jxd:optionSummary> | ||
| + | </jxd:option> | ||
| + | |||
| + | ==== alwaysShowButtons ==== | ||
| + | |||
| + | <jxd:option> | ||
| + | <jxd:optionType>Boolean</jxd:optionType> | ||
| + | <jxd:optionDefault>false</jxd:optionDefault> | ||
| + | <jxd:optionSummary>Gets or sets a value indicating whether the service buttons are permanently displayed in all columns (true), or just in active column and the column user moves the cursor over (false)</jxd:optionSummary> | ||
| + | </jxd:option> | ||
| + | |||
| + | ==== accentActiveColumn ==== | ||
| + | |||
| + | <jxd:option> | ||
| + | <jxd:optionType>Boolean</jxd:optionType> | ||
| + | <jxd:optionDefault>true</jxd:optionDefault> | ||
| + | <jxd:optionSummary>Gets or sets a value indicating whether the active column should be backlighted and permanently display the service buttons</jxd:optionSummary> | ||
| + | </jxd:option> | ||
| + | |||
| + | ==== menuSearchBoxAfter ==== | ||
| + | |||
| + | <jxd:option> | ||
| + | <jxd:optionType>Number</jxd:optionType> | ||
| + | <jxd:optionDefault>30</jxd:optionDefault> | ||
| + | <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> | ||
| + | </jxd:option> | ||
| + | |||
| + | ==== allowDragDrop ==== | ||
| + | |||
| + | <jxd:option> | ||
| + | <jxd:optionType>Boolean</jxd:optionType> | ||
| + | <jxd:optionDefault>true</jxd:optionDefault> | ||
| + | <jxd:optionSummary>Gets or sets a value indicating whether the columns may be dragged and dropped</jxd:optionSummary> | ||
| + | </jxd:option> | ||
| + | |||
| + | ===== Methods ===== | ||
| + | |||
| + | |||
| + | ==== clearColumns ==== | ||
| + | |||
| + | <jxd:function> | ||
| + | <jxd:functionSummary>Clears the list of columns in associated query and redraws a panel, if needed.</jxd:functionSummary> | ||
| + | <jxd:functionNotes> | ||
| + | This method is deprecated. Use Query.clearColumns() instead. | ||
| + | </jxd:functionNotes> | ||
| + | </jxd:function> | ||
| + | |||
| + | ==== addNewColumn ==== | ||
| + | |||
| + | <jxd:function> | ||
| + | <jxd:functionReturns> | ||
| + | <jxd:functionReturnsType>PlainObject</jxd:functionReturnsType> | ||
| + | <jxd:functionReturnsSummary>The added column object</jxd:functionReturnsSummary> | ||
| + | </jxd:functionReturns> | ||
| + | <jxd:functionSummary>Adds a new column to the query and updates the columns panel</jxd:functionSummary> | ||
| + | <jxd:params> | ||
| + | <jxd:param> | ||
| + | <jxd:paramName>attrid</jxd:paramName> | ||
| + | <jxd:paramType>String (or Array of Strings)</jxd:paramType> | ||
| + | <jxd:paramSummary>The ID (or the array of IDs) of the attribute the new column is based on.</jxd:paramSummary> | ||
| + | </jxd:param> | ||
| + | <jxd:param> | ||
| + | <jxd:paramName>index</jxd:paramName> | ||
| + | <jxd:paramType>Integer</jxd:paramType> | ||
| + | <jxd:paramSummary>The position in the columns list the new column(s) should be inserted to. If undefined, the column is added to the end of the list.</jxd:paramSummary> | ||
| + | </jxd:param> | ||
| + | </jxd:params> | ||
| + | </jxd:function> | ||
| + | |||
| + | ==== addColumn ==== | ||
| + | |||
| + | <jxd:function> | ||
| + | <jxd:functionSummary>Adds a new column to the query and updates the columns panel</jxd:functionSummary> | ||
| + | <jxd:params> | ||
| + | <jxd:param> | ||
| + | <jxd:paramName>column</jxd:paramName> | ||
| + | <jxd:paramType>PlainObject (or Array of PlainObject)</jxd:paramType> | ||
| + | <jxd:paramSummary>The column object (or the array of such objects) to be added.</jxd:paramSummary> | ||
| + | </jxd:param> | ||
| + | <jxd:param> | ||
| + | <jxd:paramName>index</jxd:paramName> | ||
| + | <jxd:paramType>Integer</jxd:paramType> | ||
| + | <jxd:paramSummary>The position in the columns list the new column(s) should be inserted to. If undefined, the column is added to the end of the list.</jxd:paramSummary> | ||
| + | </jxd:param> | ||
| + | </jxd:params> | ||
| + | </jxd:function> | ||
| + | |||
| + | ==== removeColumn ==== | ||
| + | |||
| + | <jxd:function> | ||
| + | <jxd:functionSummary>Remove the column object from the list of columns and updates the columns panel</jxd:functionSummary> | ||
| + | <jxd:params> | ||
| + | <jxd:param> | ||
| + | <jxd:paramName>column</jxd:paramName> | ||
| + | <jxd:paramType>PlainObject</jxd:paramType> | ||
| + | <jxd:paramSummary>The column object to be removed.</jxd:paramSummary> | ||
| + | </jxd:param> | ||
| + | </jxd:params> | ||
| + | </jxd:function> | ||
| + | |||
| + | ==== removeColumnByAttrId ==== | ||
| + | |||
| + | <jxd:function> | ||
| + | <jxd:functionSummary>Remove the column object from the list of columns and updates the columns panel</jxd:functionSummary> | ||
| + | <jxd:params> | ||
| + | <jxd:param> | ||
| + | <jxd:paramName>attrId</jxd:paramName> | ||
| + | <jxd:paramType>String</jxd:paramType> | ||
| + | <jxd:paramSummary>The ID of the attribute. The first found column with such an attribute ID will be removed.</jxd:paramSummary> | ||
| + | </jxd:param> | ||
| + | </jxd:params> | ||
| + | </jxd:function> | ||
| + | |||
| + | ==== moveColumn ==== | ||
| + | |||
| + | <jxd:function> | ||
| + | <jxd:functionSummary>Moves the column object from its current position to specified direction</jxd:functionSummary> | ||
| + | <jxd:params> | ||
| + | <jxd:param> | ||
| + | <jxd:paramName>column</jxd:paramName> | ||
| + | <jxd:paramType>PlainObject</jxd:paramType> | ||
| + | <jxd:paramSummary>The column object to be moved.</jxd:paramSummary> | ||
| + | </jxd:param> | ||
| + | <jxd:param> | ||
| + | <jxd:paramName>direction</jxd:paramName> | ||
| + | <jxd:paramType>String</jxd:paramType> | ||
| + | <jxd:paramSummary>One of the following: 'MoveTop', 'MoveUp', 'MoveDown', 'MoveBottom'</jxd:paramSummary> | ||
| + | </jxd:param> | ||
| + | </jxd:params> | ||
| + | </jxd:function> | ||
| + | |||
| + | ==== refresh ==== | ||
| + | |||
| + | <jxd:function> | ||
| + | <jxd:functionSummary>Re-renders the panel</jxd:functionSummary> | ||
| + | </jxd:function> | ||
| + | |||
| + | ==== setActiveColumnWidget ==== | ||
| + | |||
| + | <jxd:function> | ||
| + | <jxd:functionSummary>Activates the particular column in the panel</jxd:functionSummary> | ||
| + | <jxd:params> | ||
| + | <jxd:param> | ||
| + | <jxd:paramName>columnWidget</jxd:paramName> | ||
| + | <jxd:paramType>Object</jxd:paramType> | ||
| + | <jxd:paramSummary>The ColumnRow_ENTATTR or ColumnRow_AGGRFUNC object to activate.</jxd:paramSummary> | ||
| + | </jxd:param> | ||
| + | </jxd:params> | ||
| + | </jxd:function> | ||
| + | <PRELOAD>/apistyle.css</PRELOAD> | ||