Table of Contents

ColumnsPanel widget

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.
Code examples:
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 seting some ColumnsPanel option in code using option method: 

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

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

  <div id="ColumnsPanel"></div>

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

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

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. '{entity}' is replaced with entity name, '{attr}' is replaced with attribute name

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

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

Methods

clearColumns

Clears the list of columns in associated query and redraws a panel, if needed.
Note: This method is deprecated. Use Query.clearColumns() instead.

addNewColumn

Returns:
(PlainObject)
The added column object
Adds a new column to the query and updates the columns panel
Parameters:
attrid
Type:String (or Array of Strings)
The ID (or the array of IDs) of the attribute the new column is based on.
index
Type: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:
column
Type:PlainObject (or Array of PlainObject)
The column object (or the array of such objects) to be added.
index
Type: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:
column
Type:PlainObject
The column object to be removed.

removeColumnByAttrId

Remove the column object from the list of columns and updates the columns panel
Parameters:
attrId
Type: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:
column
Type:PlainObject
The column object to be moved.
direction
Type:String
One of the following: 'MoveTop', 'MoveUp', 'MoveDown', 'MoveBottom'

refresh

Re-renders the panel

setActiveColumnWidget

Activates the particular column in the panel
Parameters:
columnWidget
Type:Object
The ColumnRow_ENTATTR or ColumnRow_AGGRFUNC object to activate.