dhtmlxgrid:columns_manipulation [Skin test wiki]

- Columns Manipulation

Columns Manipulation

Hiding/Showing Columns

It is possible to define a column as hidden - in such case, it will not be visible for a user, but it will be accessible by API. So it will be possible to take the data from it.

In case of initialization from JS code, the user should write the following:

        //...
        grid.init();
        grid.setColumnHidden(index,true); // indicate column index and set the state to true to hire the column

In case of initialization from XML, the syntax will be like this:

    <rows>
        <head>
            <column hidden="true">Dummy</column>
        ...

The data can be accessed as data of any other columns:

        grid.cells(i,j).getValue();
        grid.cells(i,j).setValue(some);

Data of a hidden column is included in the serialization by default ( this can be controlled by setSerializableColumns() command ) This data is available during dataprocessor calls

Starting from v1.5, the users can enable popup menu for the grid setting visibility for different columns (hide/show them) right on the fly. To do this, the user just needs to include dhtmlxgrid_hmenu.js in page with the grid and call the following command:

    <script>
        grid.enableHeaderMenu();
    </script>

Each time when column hidden|shown - onColumnHidden event generated

Split Mode. Frozen Columns

The user can activate split mode to have the grid separated into two parts with independent horizontal scrolling. Using this mode is recommended with some performance optimization technologies (paginal output, smart rendering) taking into account complex script processing in the split mode.

First, the user should include the file dhtmlxgrid_splt.js into the HTML. Then the following code string should be written for split mode activation:

    <script>
        grid.splitAt(1); // index of the column before which the grid should be split
    </script>

Note: this method should be called when the grid is initialized. This mode is incompatible with some grid functionality.

Adjusting Column Size

Sometimes it is necessary to adjust column size to content size automatically. This task can be achieved in the following way:

    <script>
        grid.adjustColumnSize(cInd);
    </script>

The parameters here is cInd - index of the column in question.

Enabling Columns Resizing

The user should enable/disable resizing of specified columns from script in the following way:

    <script>
        grid.enableResizing(list); // resizing is enabled for all columns by default
    </script>

Only one parameter should be indicated: list - list of true|false values.

Enabling Columns Tooltips

Tooltips for specified columns can be specified in the following ways:

    <script>
        grid.enableTooltips(list); // tooltips are enabled for all columns by default
    </script>

The parameter that is to be indicated is list - list of true|false values.

Column Id/Index Manipulations

Getting Id through Index and Vice Versa

There are methods allowing to get id/index of the specified column quite easily:

    <script>
        var colInd = grid.getColIndexById(id); // get column index through its id
        var colId = grid.getColumnId(ind); // get column id through its index
    </script>

The first method returns index of the column, while the second one - column id.

Setting Column Id

The user can set new id for a certain column with the help of the following method:

    <script>
        grid.setColumnId(ind, id);
    </script>

The parameters here are:

ind- index of the column;
id- new id for the column in question.

Setting Ids for All Columns

There is also the possibility to set new ids for every column in the grid:

    <script>
        grid.setColumnIds(ids);
    </script>

The user should specify ids - list of ids separated by a delimiter (default one is ”,”), or empty if using values set earlier.

Getting Column Type

The user can get column type by specifying its id:

    <script>
        var type = grid.getColTypeById(cId);
    </script>

The method returns type code of the column in question.

Setting/Getting Column Width

Initial column width can be set either in pixels or in percents in the following way:

    <script>
        grid.setInitWidths(wp); // list of column width in pixels
        grid.setInitWidthsP(wp); // list of column width in percents
    </script>

Column width can be easily got in the following way indicating index of the column in question:

    <script>
        var width = grid.getColWidth(ind); // returns column width in pixels
    </script>

Getting Number of Columns

Only one line of code is enough for the user to get total number of columns in the grid:

    <script>
        var cols = grid.getColumnsNum();
    </script>

Getting Column Status

Column status (shown|hidden) can be got with the help of isColumnHidden() method. The user should indicate this column index:

    <script>
        var state = grid.isColumnHidden(ind);
    </script>

The method returns true if the column is hidden, otherwise it will return false.

Setting Column Align

Setting horizontal align of values for the grid columns is quite simple:

    <script>
        grid.setColAlign(alStr);
    </script>

The parameter the user should indicate is alStr - list of align values for columns. Default delimiter is ”,”. Possible values are:

right;
left;
center;
justify.

The following method is responsible for vertical align of values in grid columns:

 
      <script>
          grid.setColVAlign(valStr);
      </script>

Parameter valStr indicates vertical align values list for columns. Default delimiter is ”,”.
Possible values are:

baseline;
sub;
super;
top;
text-top;
middle;
bottom;
text-bottom.

Setting Column Width

The user can apply the method that sets width of the specified column in pixels.

    <script>
        grid.setColWidth(ind, value);
    </script>

The parameters here are:

ind - index of the column;
value - new width value.

Note: this method will not work with percent-based grid.

Column minimal width can be set through the following method (works only for manual resizing):

    <script>
        grid.setColumnMinWidth(width, ind);
    </script>

The parameters here are:

width - minimum column width; can be set for one specified column, or as a comma separated list for all columns;
ind - index of the column.

Setting Column Color

The user can colorize columns background from script using the following method:

    <script>
        grid.setColumnColor(clr);  // list of colors for each column should be specified
    </script>

Controlling Columns Visibility

The user can set the list of visible|hidden grid columns from script like this:

    <script>
        grid.setColumnsVisibility(list);
    </script>

The parameter here is the list of true (visible) or false (hidden) values separated by commas.

Setting Column Excell Type

The user can set/change excell type of a column in the following way:

    <script>
         grid.setColumnExcellType(colIndex,type);
    </script>

The parameters the user should indicate:

colIndex - index of the column in question;
type - type of the excell.

Adding/Removing Column

The user should include dhtmlxgrid_mcol.js file into the page first. Then any column in the grid can be added/removed with script in the following way:

    <script>
        grid.insertColumn(ind,header,type,width,sort,align,valign,hidden,columnColor);
 // can be used after grid's initialization but there should be at least one column in the grid
        grid.deleteColumn(index);
    </script>

The parameters for insertColumn() method are:

ind - index of the column;
header - header content of the column;
type - type of the column;
width - width of the column;
sort - sort type of the column;
align - align of the column;
valign - vertical align of the column;
hidden - hidden state of the column;
columnColor - background color of the column.

Moving Column

The following method moves column with the specified index to a new position:

    <script>
        grid.moveColumn(oldInd,newInd);
    </script>

The user should include the following file: dhtmlxgrid_mcol.js , and indicate the following parameters:

oldInd - current index of the column;
newInd - new index of the column.