3. Columns and sections

Columns in three horizontal sections

• See Column basics documentation.

• Description

  
  The column defines the name, size and position of all the cells in it. Optionally it defines the cell attributes like Type or Format for all cells in it, these attributes can be redefined in individual cells.
  The column does not define data, data are defined only in row cells. The columns control only cells in Variable and Fixed rows, not in Solid rows.
  For cell types, formats and other attributes see Cells tutorials.
• There are three column sections in TreeGrid, left, middle (variable) and right.

• Definition

  
  The column is defined by

  <C>

  tag. Left columns are defined in

  <LeftCols> ... </LeftCols

  tag, Middle (variable) columns are defined in

  <Cols> ... </Cols

  tag, Right columns are defined in

  <RightCols> ... </RightCols

  tag,

• Width and scroll of column sections

  
  By default only the middle section is horizontally scrollable, the left and right sections are fixed and always visible, except there is no room for them.
  Set the sections default and minimal sizes to be all three sections scrollable and resizable (<Cfg LeftWidth MidWidth RightWidth/> and <Cfg MinLeftWidth MinMidWidth MinRightWidth/>).
  See Widths of individual sections documentation.

• Visibility

  
  By default are all the defined columns visible. Set <C Visible='0'/> to not show the column.
  Columns can be shown / hidden by users in columns menu (shown by click to icon on default toolbar). Set <C CanHide='0'/> to not show the column in the menu.
  See Column visibility documentation.

• Moving

  
  The column can be moved (dragged by mouse) inside or outside its section by dragging its caption in Header. Set <C CanMove/> to permit if and where the column can be moved.
  To move some columns together set their <C Group/> attribute to the same value. Useful especially for spanned cells.
  See Column position and moving documentation.

• Width

  
  The column width is set by <C Width/> attribute. If the Width attribute is missing, the column width is calculated to fully show the first 100 cells in the columns. The calculation can be slow if the grid has many columns.
  The column can fill the rest of the main div tag width if set <C RelWidth/> attribute.
  The column sections can be resized by dragging the section edge. Set <Cfg LeftCanResize RightCanResize/> to control if and when the sections can be resized.
  See Widths of individual sections documentation.

• Resizing

  
  Column can be resized by mouse dragging the column caption edge in Header. Set <C CanResize='0'/> to restrict it.
  If the header has spanned cells, dragging the spanned cell edge resizes always the last column in the spanned range.
  See Column width documentation.

• Configuration in cookies

  
  Columns visibility, position and sizes are saved to cookies by default. To avoid it, set <Cfg SuppressCfg='1'/> to not save the whole grid configuration,
  or set <Cfg ColsLap='1'/> to not save any column attribute or <Cfg ColsPosLap='1'/> to not save positions or <C WidthLap='1'/> or <C VisibleLap='1'/> to not save particular column width or visibility.
  The column sections widths will not be saved if set <Cfg SectionWidthLap='1'/>.
  Only the scroll position is not saved by default, permit it by <Cfg ScrollLeft='0'/> (and/or <Cfg ScrollTop='0'/>).
  See Configuration in cookies documentation.

• Panel

  
  There is one predefined column named Panel defined by <Panel> tag directly inside <Grid> tag as row left panel containing control buttons for individual rows.
  See Panel Type documentation.

• Pager

  
  There is special object Pager that can be placed on left or right grid side (chosen by Left attribute). It is not a column. It shows a clickable list of items.
  The pagers are defined by

  <Pager/>

  tag in

  <Pagers> ... </Pagers>

  tag. There can be more pagers in one grid.
  The pager can show a list of root pages in grid (Type='Pages'). Or date ranges for paging in Gantt (Type='Gantt'). Or any custom list of items defined by API (Type='Custom').
  See Pager documentation.

• API

  
  
  • Access (read and write) the column attributes by Grid.Cols[name].attr (e.g. G.Cols.Col1.CanEdit = 0;). Or use GetAttribute / SetAttribute API method.
  • To iterate all column names in grid use such loop: for(var col in Grid.Cols). Or call GetCols API method to get the column names sorted by their position. Or use GetFirstCol / GetNextCol API methods in a loop.
  • To manipulate columns use API methods like AddCol, DelCol, ShowCol, HideCol, MoveCol, SetWidth (resize).
  • See Column API documentation.