ColumnsPanel widget

December 28, 2019

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.

Options

showAddRow

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

showHeader

Type: Boolean
Default: true
Gets or sets a value indicating whether columns panel must show a header at the top

showColumnCaptions

Type: Boolean
Default: true
Gets or sets a value indicating whether columns panel must show an editable caption for each column (i.e. "SELECT ColumnName AS ColumnCaption...")

allowAggrColumns

Type: Boolean
Default: true
Gets or sets a value indicating whether columns panel allows user to use aggregated columns

allowDuplicates

Type: Boolean
Default: true
Gets or sets a value indicating whether it's allowed to add exactly the same column more than once

allowCustomExpressions

Type: Boolean
Default: false
Gets or sets a value indicating whether it's allowed to use a custom expression for the column definition instead of some entity attribute. If it's turned on - a new menu item appears in the menu dropped on clicking on [f] button. ///

allowSorting

Type: Boolean
Default: true
Gets or sets a value indicating whether columns panel allows user to set columns sorting

attrElementFormat

Type: String
Default: '{entity} {attr}'
Gets or sets the format of the attribute display name. '' is replaced with entity name, '' is replaced with attribute name

titleElementFormat

Type: String
Default: null
Gets or sets the format of column's title display name. '' is replaced with entity name, '' is replaced with attribute name. Default value is null which means that columns panel will use the same format as it's set to attrElementFormat option ///

alwaysShowButtons

Type: Boolean
Default: false
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)

accentActiveColumn

Type: Boolean
Default: true
Gets or sets a value indicating whether the active column should be backlighted and permanently display the service buttons

menuSearchBoxAfter

Type: Number
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

allowDragDrop

Type: Boolean
Default: true
Gets or sets a value indicating whether the columns may be dragged and dropped

menuOptions

Type: Object
Default: ``
Contains different options for popup menu that appears for selecting attributes in columns.\ Includes the following sub-options:

attrPlacement

Type: Integer
Default: 0
Defines where to display attributes in the tree: 0 - attributes are displayed after entities 1 - attributes are displayed before entities 2 - attributes and entities are mixed, and displayed in alphabetical order. In this case the "sortEntities" option value dosn't matter.

sortEntities

Type: Integer
Default: false
Defines whether entities and attributes should be sorted alphabetically. If false, they are displayed as listed in the model.

columnRenderedCallback

Type: function
Default: null
The callback that is called when the column's row has been rendered. It allows you to make any changes you need to the markup of the row. Parameters: columnDiv - jQuery object that represents the column's row div For example, if you need to add some class:

columnRenderedCallbackHandler: function (columnDiv) {
  columnDiv.addClass("some-cool-class");
}

customExpressionText

Type: Integer
Default: 0
Gets or sets a value which defines what text should be used for custom expressions' links. Possible values are: 0 - show the SQL expression itself. Default behaviour. 1 - show special [Custom SQL] text. 2 - show column's title.

Methods

clearColumns

Clears the list of columns in associated query and redraws a panel, if needed.

This method is deprecated. Use Query.clearColumns() instead.

addNewColumn

Returns: The added column object
Returns type: PlainObject
Adds a new column to the query and updates the columns panel

Parameters

Name	Type	Description
`attrid`	String (or Array of Strings)	The ID (or the array of IDs) of the attribute the new column is based on.
`index`	Integer	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.

addColumn

Adds a new column to the query and updates the columns panel

Parameters

Name	Type	Description
`column`	PlainObject (or Array of PlainObject)	The column object (or the array of such objects) to be added.
`index`	Integer	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.

removeColumn

Remove the column object from the list of columns and updates the columns panel

Parameters

Name	Type	Description
`column`	PlainObject	The column object to be removed.

removeColumnByAttrId

Remove the column object from the list of columns and updates the columns panel

Parameters

Name	Type	Description
`attrId`	String	The ID of the attribute. The first found column with such an attribute ID will be removed.

moveColumn

Moves the column object from its current position to specified direction

Parameters

Name	Type	Description
`column`	PlainObject	The column object to be moved.
`direction`	String	One of the following: 'MoveTop', 'MoveUp', 'MoveDown', 'MoveBottom'

refresh

Re-renders the panel

setActiveColumnWidget

Activates the particular column in the panel

Parameters

| Name | Type | Description | | -------- | ------- | --------------------------- | | columnWidget | Object | The ColumnRow_ENTATTR or ColumnRow_AGGRFUNC object to activate. | Here is an example how to set ColumnsPanel options when you initialize ''easyQuerySettings'' variable:

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,
       .   .   .   .   .   .
   }
   .   .   .   .   .   .
}

An example of setting some ColumnsPanel option in code using ''option'' method:

var QCDiv = $('#QueryColumn');
if (QCDiv.length > 0) {
  QCDiv.ColumnsPanel("option", "showHeader", false)
}

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:\ \

Define a placeholder javascript <div id="ColumnsPanel"></div>
Include ''eq.all.min.js'' and ''eq.view.js'' on your page (after jQuery and jQuery UI).