News in version
TreeGrid Gantt chart SpreadSheet Examples Documentation Download Development Licensing Prices References Contacts Buy Try it free
Documentation
Search in documentation
TreeGrid versions compatibility

Changes log (txt file) Using custom CSS from 13.3 to 14.0 Upgrading from 9.3 to 10.0 Upgrading from 5.9 to 6.0

Using in JavaScript frameworks

Angular Ember Express React Svelte Vue Other frameworks NodeJS server SalesForce LWC

Creating grid

Simple examples Basic information Creating grid Deleting grid Reloading grid Rendering grid Accessing grid by API

Data & communication
Data communication with server

Communication types AJAX communication AJAX SOAP envelope Submit communication Directly included data Data from JavaScript Cross domain / local load by JSONP Sessions (AJAX) Server response (AJAX) Synchronous communication (AJAX) Caching (AJAX) API (AJAX)

Download data

Settings for data download Layout XML structure Data XML structure

Upload data

Settings for data upload API for upload XML structure sent to server

Changing data from server

XML structure of download changes XML structure of request for a cell Synchronizing data with server

Input / output data formats

Complete list of tags Internal XML format Short XML format Extra short XML format DTD XML format JSON format

Cells
Cell basics

Cell type Cell format Dynamic format Dynamic type Cell value Reading / writing attributes by API Cell HTML Cell default Range or more values in one cell Cell with link URL Cell hint Cell tooltip / title Cell popup menu

Cell editing and changing values

Cell editability Dynamic editing Locking Defaults list Suggest list (auto complete) Tags input Changing cell value Mass cell change Clearing cells Editing cells Controlling <input> tag by JavaScript Input validation and restrictions Side checkbox Cell selecting

Calculations - cell formulas

Basics Formulas Mathematical functions Aggregate functions Special functions for actions Custom functions

Calculations - editable cell formulas

Basics Suggest list (auto complete) Defined names Actions for choosing cells Conditional functions Lookup functions Cell reference functions Logical functions Informational functions Mathematical functions Trigonometry functions Rounding numbers Number conversions String functions Date functions Summary functions Custom functions

Cell side buttons

Introduction Right side Button Left side Icon

Cell spanning

Column span Row span Dynamic spanning

Cell style and color

Basic grid style Sizing and scaling - responsive design Dynamic cell style attributes Cell CSS class Cell background color Dynamic cell border Cell HTML style Row color alteration Cell mouse cursor

Editable cell images

Insert image Edit image

Cell types
Automatic type - Auto String - Text, Lines & Pass
Number - Int & Float

Format Localization

Date and time - Date

Format Calendar component Dates dialog Localization

List & combo - Enum & Radio

Introduction Definition Related lists Enum specific Radio specific

Checkbox - Bool
Action button - Button

Introduction Basic clickable button Switch button Radio / tab button Menu button Combo switch button Combo radio / tab button Special Space rows with buttons

Panel with more buttons - Panel

Definition Standard fast panel Custom panel

HTML and special types

Html type EHtml type (editable) Icon type Abs type List type Editable Link type Editable Img type DropCols type Upload File type

Columns

Column basics Column index Column visibility Column visibility menu Column selecting Column tree Auto column tree Column position and moving Column adding and copying Column deleting Column width Column API

Rows
Row basics

Rows by functionality Rows by position Row name Row id Row index

Default rows

Description Example of default rows Example of changing default row Attributes

Row tree

Tree attributes Actions & API for expand / collapse

Row identification

Setting row id attribute Row id attribute in tree Row id created from cell values API for row ids

Row visibility
Row adding and copying

Five ways of adding rows to grid Adding and copying restrictions Adding new empty rows Copying existing rows

Row deleting Row moving and dragging Row selecting Row height Row API Space rows
Features
Sorting rows

Sort settings Controlling sort position Comparing strings Sorting actions Sorting API

Grouping rows to tree

Group settings Creating groups Comparing strings Created group rows <D Group='1'/> User interface to choose grouping Grouping actions and API

Filtering rows

Filter settings Comparing strings User interface to choose filter Filter actions and API

Searching in rows and cells

Search settings User interface for search Search actions and API

Printing grid

Print settings Choosing items to print Page size Print API

Print / export to PDF

Introduction Client side settings Printing options Client side API Server side API Data sent from client to server

Export to Excel or CSV

Introduction and export types Basic settings Styling export XLSX export Gantt export CSV export Old XLS / XHTML export Export API Communication with server Client export Server export

Import from Excel

Basic settings Sheets manipulation

Copy & paste rows via clipboard

Copy & paste permissions Copying to clipboard Pasting from clipboard

Master - detail grids

Introduction External master - detail grids Nested master - detail grids Synchronizing grids Other attributes for master - detail

Pivot tables

Pivot attributes & API Pivot formulas

External objects (custom JavaScript objects) Undo & Redo
Gantt and bar chart
Gantt objects

Gantt objects list Display settings Edit settings

Main bar

Definition of main bar and plans Main bar as Task Edit settings Main bar content and side html Tip on mouse hover Vertical position and height Style specific attributes API to manipulate Main bars Actions Side text (deprecated) Real Flow (deprecated)

Run bar

GanttRun Definition Extended definition Run bar as Task Edit settings Save format Selecting Run boxes Run box content and side html Tip on mouse hover Box identification Vertical position and height Style specific attributes Overlaid (Error) boxes Containers for more boxes Dragging - moving and resizing API to manipulate Run boxes Actions Run special formulas

Summary task

Main for Main Main for Run Editable Main Editable Run

Gantt icons - Flag & Point

Flag - icon with text Point - math points

Gantt display objects

Header - column captions Cell and column Background Vertical movable Line Mark & Progress line

Gantt zoom

Zoom options Chart size limits Zoom selection Paging in Gantt chart

Dependency, constraints & schedule

Introduction Data units Defining dependencies Dependency colors and shapes Changing dependencies Correcting dependencies Scheduling algorithm Project date constraints Task date constraints Critical path - Slack (Float)

Gantt calendars

Global base calendar Local calendar Calendar list Calendars dialog Other settings

Gantt resources

Resources list Resources assign Resources filter Resources calculations Availability chart Resource usage chart Generated resource usage chart

Gantt popup menu Gantt API
Line and XY points charts

Charts in grid cells Chart JSON definition Base chart settings Basic attributes Size Axis and caption Individual chart lines Data sources Visual settings API for standalone usage

Paging in large grids
Paging root rows

Paging types and attributes Auto adding root pages API for paging

Pager components

Side pager Side pager type Pages Side pager type Gantt Side pager type Custom Pager with navigation buttons & edit Pager as list of page indexes

Paging in tree

ChildPaging - load / render on expand MaxChildren - limit children count ChildParts - load / render on scroll

Paging columns

Paging types and attributes Auto adding column pages API for column paging

Server paging

Server paging for root rows Server communication in root paging Root paging in very large tables Server paging in tree Server communication in tree paging XML Request for Data in root paging XML Download Data in root paging XML Request for root Page / children XML Download root Page / children API for server paging

TreeGrid DLL/SO for server paging

Introduction Compatibility with TreeGrid control Using TreeGrid server DLL/SO ASP.NET C# ASP.NET VB PHP JSP Java TreeGrid server concepts Function reference Calculations

JSON menus and dialogs
JSON menu description JSON menu definition example
Menu settings

Base attributes Visual settings Key navigation Behavior Size and scroll

Menu item settings

Base attributes Clickable item Inactive caption Collapsible sub level Popup sub menu Columns Bool item Enum item Edit item

Custom menu in JavaScript

Show custom menu Custom menu position Custom menu advanced settings Custom menu JavaScript events Custom menu JavaScript methods

Calendar dialog Custom calendar & JavaScript events Custom dialog in JavaScript
Global grid settings
Grid size and scroll

Default behavior Maximize grid height and width Update size according to the content Let a user to control the grid size Widths of individual sections Other scrolling attributes and API

Media rules - responsive design
Languages

Language & regional setup (Text.xml) Translate texts dynamically Change language

Grid cursor - Focus & hover

Focused cell and row Focused cell range Move and copy focused cells Filling cell values by dragging Tabulator navigation Key navigation Cursor look - focus & hover

Selecting rows, cells and columns

Selecting base Selecting rows Selecting cells Selecting columns

Global settings

Status messages Configuration menus Configuration menu - options Configuration menu - columns Configuration menu - print / PDF Configuration menu - export Default toolbar Useful API function Help file

Animations

Animations base Row animations Column animations Cell animations Animations for undo / redo Animations for server side changes Dialog animations

Grid configuration in cookies
Mouse & key events & actions

List of event handler types TreeGrid mouse events Mouse event names Key and mouse button prefixes Touch event names Event targets Assigning event actions / callbacks Event action parameters Action name suffix Calling actions from JavaScript Creating custom actions Focused vs. Actual cell TreeGrid key events JavaScript API events

Mouse API event TreeGrid files
Debugging and testing

Debug window Automated testing

Action button - Button

TreeGrid documentation

Introduction

Button type can display various action button types:
clickable buttonClickable button, after click there is called predefined action.
switch buttonButton with two states on / off. After click it switches to the other state and is called predefined action.
radio / tab buttonGroup of switch buttons - after click to one button in group the other buttons are automatically switched off.
menu buttonAfter click to button is displayed popup menu and user selects one action from the list.
combo switch buttonA user selects button state from its popup menu, for the selected state is called assigned action.
combo radio / tab buttonA group of combo switch buttons, after change some button state, the other buttons are reset to its predefined empty value.

Button type is intended to use especially in Space rows as control or tool buttons or tabs.
In normal non space rows is often better to use Panel type to show one or more clickable buttons in one cell.

Basic clickable action button

<C> <cell> string

Type

["Text"] Type = "Button"
To define Button type, set column or cell attribute Type to "Button".
The Button Type is default type in Toolbar and Tabber rows.
new 6.0 <cell> string

value

Button content / text, can be:
0 or ""The content will be read from ButtonText. To display "0" use value as "0 "
1The content will be read from ButtonTextChecked or if not set, from ButtonText. To display "1" use value as "1 "
stringHTML code for Button type Html.
HTML caption for TreeGrid Button type Button, if set UseButton = 0.
<BUTTON> caption for Button type Button, if set UseButton = 1.
HTML code for Button type Class, used only if set ShowButtons!
new 6.0 upd 11.0 <C> <cell> string

Button

["Html" / "Tab"]
Type of button display. Default is "Html" except for Tabber row that is "Tab".
ButtonShows TreeGrid styled button with HTML text and / or side icon if set UseButton = 0.
Or shows HTML <BUTTON> tag with HTML text if set UseButton = 1.
HtmlShows HTML text displayed as is and / or side icon.
It can be also <button>, <img>, <a> tag or any other HTML code.
It can contain also any predefined JavaScript onclick code.
Class(new 11.0) Similar to Html, but the button icon is usually shown by CSS class.
To the button div tag is assigned CSS class TxToolXXX, where Tx is the style prefix like TS for Standard style and XXX is the cell (column) name or ButtonClass .
If set IconAlign, to the button div tag is added also CSS class TxToolXXXAAA, where AAA is the IconAlign value like "Top" or "Right".
TabSimilar to Html, but with different look - visually separated tab page. Can be used only on Space row.
TabSepNo button, tab separator only. Set the space cell Width attribute to the separator size (since 7.0).
If the TabSep cell has not set its Width, it has automatically set RelWidth='1' and aligns the next cells right side.
new 6.0 <C><I><cell> int

ButtonWidth

[-1]
Width of < BUTTON > tag for Button="Button", in pixels. Set -1 for auto width according to the content.
new 6.0 <C> <cell> string

Icon

Icon file to show the icon inside the button on given side.
It can be also standard left / right side icon, see Left side icon.
It is used only for Button="Html", "Tab", "Class" and Button="Button" if set UseButton = 0.
new 6.0 upd 11.0 <C><I><cell> string

IconAlign

["Left"]
Position of the button side Icon. By default the Icon is placed left side of the button text.
Supported values are "Left", "Right" and since 11.0 also "Top", "Bottom".
It is used also for Button="Class" to more specify the CSS class, usually also for the icon side.
It can be overwritten globally by ShowButtons value, set <Cfg ShowButtons='3'/> to use IconAlign for all Button values.
new 6.0 <C> <cell> int

IconWidth

[20]
Width in pixels of the Icon. Used only for IconAlign="Left" or "Right"
The icon should not be wider than the IconWidth, otherwise it is overwritten by the cell text.
The IconWidth can be also set to 0 to use the Icon as background image of the cell.
new 11.0 <Cfg> int

ShowButtons

[0] Saved to cookies; to not load it, set ShowButtonLap='1'
What will be shown in buttons with both text and side icon. Affects also Button="Class".
To cookies are saved only values 1, 2 and 3. Changing the value via configuration menu refreshes only Space rows.
0For backward compatibility, for Button="Html" and Button="Tab" shows both, but for Button="Class" shows only the icon (=class).
1Shows only icons
2Shows only texts
3Shows both text and icons
4Shows both text and icons, icon always on left
5Shows both text and icons, icon always on right
6Shows both text and icons, icon always on top
7Shows both text and icons, icon always on bottom
new 7.0 <Space cell> int

Height

Height of the cell in pixels.
Set it when the Icon in Space cell is not visible whole.
new 6.3 <C> <cell> bool

Disabled

[0]
If the button is disabled.
Disabled button is inactive and is displayed with 30% opacity.
Disabled button does not call OnClickButton event, but still calls OnClick event.
new 12.0 <C> <cell> string

Underline

Line in given color shown under the button. It can be any CSS color.
new 12.0 <C> <cell> int

UnderlineStyle

Style of the Underline line. If not set, it is 4px solid.
0 - none, 1 - 1px solid, 2 - 2px solid, 3 - 3px solid, 4 - 1px dotted, 5 - 2px dotted, 6 - 1px dashed, 7 - 2px dashed.
new 12.0 upd 13.1 <C> <cell> string

ButtonClass

CSS class name part to be used instead of the column name for Button="Class".
Useful to display different icon based on some value, because the ButtonClass can be calculated by Formula.
Since 13.1 it can contain more class name parts separated by comma (not by space).
new 6.0 <XML event> void

OnClickButton

(TGrid Grid, TRow Row, string Col, TEvent Event)
Standard column, row, cell or Actions attribute containing JavaScript code.
It is called on click to the cell of Type="Button".
It is standard TreeGrid mouse event, here is just mentioned to not forget its possibility when handling Button clicks.
Example: <I Col1OnClickButton='alert("clicked column "+Col);'/>
The difference between OnClick and OnClickButton is that OnClickButton is not called for disabled button, but OnClick is called always.
new 6.0 <XML event> void

OnClick

(TGrid Grid, TRow Row, string Col, TEvent Event)
Standard column, row, cell or Actions attribute containing JavaScript code.
It is called on click to the cell.
It is standard TreeGrid mouse event, here is just mentioned to not forget its possibility when handling Button clicks.
Example: <I Col1OnClick='alert("clicked column "+Col);'/>
The difference between OnClick and OnClickButton is that OnClickButton is not called for disabled button, but OnClick is called always.
new 6.0 <Actions>

Button ...FAO

Attached to event OnClickButton
Provides action for the button
new 9.3 API method void

ButtonClick

(TRow row, string col)
Simulates click to the given button, similarly to action Button.
<C> <cell> string

ReloadData

Url or data to reload body from here when button is clicked.
It can be direct XML (starting with <) or tag id of existing tag (input) to use its value or URL.
It replaces Data_Url / Data_Tag / Data_Data and reloads body of TreeGrid.
The data must contain only <Body> tag and not layout definition.
If defined List, it contains first character separated list of the data to reload on the specific item click.
new 11.0 <Cfg> int

UseButton

[0]
How the TreeGrid buttons are rendered.
Bit array: 1.bit for type Button with Button="Button", 2. bit for right side button with Button="Button", 3. bit for type Panel custom button.
0 - It renders the buttons as TreeGrid styled button done by <u> tag.
1 - It renders the buttons as HTML <button> tag. Set UseButton='7' for all three type buttons. Default behavior before version 11.0.
new 11.0 <Actions>

ButtonDown ...FA

Attached to event OnMouseDownButton
Simulates visual effect of clicking button with Button="Button" and UseButton='0'. Returns always 0.
new 11.0 <Actions>

ButtonUp ...FA

Attached to event OnMouseUpButton
Clears visual effect set by ButtonDown. Returns always 0.

Switch on / off button

new 6.0 <C> <cell> int

Switch

[0]
If set to 1, the button will have two states 0 / 1 and can be switched by click.
Since 15.0 if set to 2 and the button value has number value, it will use ButtonTextX (e.g. ButtonText3 for value 3) instead of ButtonTextChecked and IconX instead of IconChecked.
new 6.0 <cell> bool

value

[0]
Button value is 0 or "" as off and 1 as on
new 6.0 <C> <cell> string

ButtonText

HTML code for Button type Html.
<;BUTTON> caption for Button type Button.
new 6.0 <C> <cell> string

ButtonTextChecked

If set, it replaces ButtonText for checked Switch button (button with value > 0)
new 6.0 <C> <cell> string

Icon

Standard left / right side button, see Left side icon.
new 6.0 <C> <cell> string

IconChecked

If set, it replaces Icon for checked Switch button (button with value > 0)
<C> <cell> string

Formula

Standard Formula attribute for Calculated row, here is stated just not forget its advantage for Switch buttons.
The Switch button can have set its Formula to calculate its state.
The formula must return 0 or 1 as button state.
new 6.0 <XML event> void

OnChange

(TGrid Grid, TRow Row, string Col, TEvent Event)
Standard column, row, cell or Actions attribute containing JavaScript code.
It is called when the Switch or Radio Button value is changed. For Radio is called also for automatically unchecked buttons.
Attach the action or any JavaScript code to the cell to be run on cell value change, like <I ... Col1OnChange='alert("changed!")' ... />
The new state can be got by Get(Row,Col).
new 6.0 <XML event> void

OnCheck

(TGrid Grid, TRow Row, string Col, TEvent Event)
Special column, row, cell or Actions attribute containing JavaScript code.
It is called when the Switch or Radio Button value is checked.
Example: <I Col1OnCheck='alert("checked cell "+Col);'/>
new 6.0 <XML event> void

OnUncheck

(TGrid Grid, TRow Row, string Col, TEvent Event)
Special column, row, cell or Actions attribute containing JavaScript code.
It is called when the Switch or Radio Button value is unchecked. For Radio is not called for automatically unchecked buttons.
Example: <I Col1OnCheck='alert("unchecked cell "+Col);'/>

Radio / tab button

A group of Switch buttons, a user switches among them - chooses only one.
It is possible also to add, delete, move or copy the tabs / radios if permitted by appropriate attributes.
All other attributes are the same as in Switch button, except the Switch attribute itself.
new 6.0 <C> <cell> int

Radio

[0]
If set, all the Button cells (in the same row) with the same Radio value will be in one radio group.
It is an index of radio group of Button cells in row.
Only one cell in the group of cells (with the same Radio) can be checked.
When a user checks some Radio button, the previously checked button in the group is automatically unchecked.
new 6.0 <C> <cell> bool

Uncheck

[0/1]
If all the buttons with the same Radio can be empty - a user can uncheck the checked button.
new 13.0 <I> string[]

DragTab

Defines section, where the buttons can be dragged (moved and copied). By default the buttons cannot be dragged.
Comma separated of pairs of cell names as outside bounds where the inside buttons can be moved. If the item is empty, it is the last left or right bound.
For example <I Cells='A,B,C,D,E,F,G,H,I,J,K,L' DragTab=',D,F,K'/> - The buttons A,B,C can be moved among themselves (inside left and D) and buttons G,H,I,J can be moved among themselves (inside F and K).
new 13.0 <C> <cell> bool

CanMove

[1]
If the button can be moved according to the DragTab settings.
new 13.0 <C> <cell> int

CanCopy

[0]
If the button can be copied according to the DragTab settings.
If set to 2, the button copy gets CanDelete='1'.
new 13.0 <C> <cell> int

CanDelete

[0]
If the button can be deleted.
If set to 2, it shows also close icon in top right corner.
new 13.0 <C> <cell> bool

CanEdit

[0]
If the button ButtonText can be edited.
new 13.0 API event type

OnTabDrop

(TGrid grid, TRow row, string col, string tocol, bool copy)
Called before the button is dropped left to the tocol. tocol is empty string to drop as the last cell.
copy is set if the button will be copied instead of moved.
Return true to not drop it. Return new tocol to drop it somewhere else. Return null for default behavior.
new 13.0 API event bool

OnTabDelete

(TGrid grid, TRow row, string col)
Called before the button is deleted, return true to not delete it.
new 13.0 <Actions>

TabMove

Attached to event OnDragButton, can be attached only to OnDrag... events
Starts dragging the button by mouse.
new 13.0 <Actions>

TabCopy

Attached to event OnRightDragButton, can be attached only to OnDrag... events
Starts dragging the button by mouse, the button will be copied.
new 13.0 <Actions>

DeleteTab

Attached to event OnDblClickButton
Deletes the button.

Menu button

On click to button is displayed popup menu and user uses one action to be done.
Default icon setting is Icon="Popup" IconAlign="Right". You can hide the icon by setting Icon=""
new 6.0 <C> <cell> string[*]

List

A first character separated list of values to select to the button value. A user can choose one value from combo.

Or it can be in standard TreeGrid menu format as complex menu with sub levels, sub menus, columns and so on.
The individual menu items can have set attributes Icon, Action and ReloadData to be used instead of Icons / Actions / ReloadData lists.
new 6.0 <C> <cell> string[*]

Icons

A first character separated list of icons displayed for individual menu items in List.
For combo button is the chosen menu item icon also set to the button Icon attribute.
new 7.0 <C> <cell> int

IconHeight

Height in pixels of the icons in Icons.
new 6.0 <C> <cell> string[*]

Actions

A first character separated list of OnClick actions called after specific item in menu List is clicked.
The action can contain any JavaScript or TreeGrid action like standard XML event, see OnClick.
<C> <cell> string[*]

ReloadData

A first character separated list of ReloadData urls.
new 6.0 API event void

OnButtonListClick

(TGrid grid, TRow row, string col, string item, int index)
Called after some event in Button List menu is clicked. item is item name from List, index is item position in List or menu item Value if set.
new 11.0 API event string

OnGetButtonList

(TGrid grid, TRow row, string col, string list)
Called before displaying menu List to get the list dynamically.
Returns original or modified button list.
Or return null to not show the list.
new 11.0 API event void

OnShowButtonList

(TGrid grid, TRow row, string col, TMenu Menu, TPosition Pos)
Called before displaying menu List to update the menu dynamically.
It can be used to do any modification in Menu, for example to sort or change position in Menu.Items array. See Menu documentation.

Combo switch button

If you set both Switch and List, the button behaves as combo box - a user chooses one button value from the popup menu.
All other attributes are the same as in Popup menu button.
new 6.0 <C> <cell> bool

Switch

[0]
If set, the button will get the value chosen in List.
new 6.0 <cell> string

value

Initial Button value or value chosen from List.
<C> <cell> string

Formula

Standard Formula attribute for Calculated row, here is stated just not forget its advantage for Switch buttons.
The Switch button can have set its Formula to calculate its state.
The formula must return the button text to display.
new 6.0 <XML event> void

OnChange

(TGrid Grid, TRow Row, string Col, TEvent Event)
Standard column, row, cell or Actions attribute containing JavaScript code.
It is called when the Switch or Radio Button value is changed. For Radio is called also for automatically unchecked buttons.
Attach the action or any JavaScript code to the cell to be run on cell value change, like <I ... Col1OnChange='alert("changed!")' ... />
The new state can be got by Get(Row,Col).

Combo radio / tab button

If you set both Radio and List, the button behaves as radio combo box - a user chooses one button value from the popup menu.
A group of Switch buttons, a user switches among them - chooses only one.
In the group can be combined the combo and normal Switch buttons.

All other attributes are the same as in Combo switch button and Radio tab button, except the Switch attribute itself.
new 6.0 <C> <cell> string

EmptyValue

The value set to the button text when the button is automatically unchecked, because of checking another button in the radio group.
Remember, its functionality differs from EmptyValue attribute for other cell types.
new 7.0 <C> <cell> string

EmptyIcon

The icon set to the button Icon attribute when the button is automatically unchecked, because of checking another button in the radio group.
new 7.0 upd 12.0 <C> <cell> int

PopupIcon

[1]
If the right side popup icon will be displayed.
0 - never, 1 - only for EmptyValue, 2 - always. 3 - new 12.0 always and show the menu only on click to the icon, not to the button itself.

Special Space rows with buttons

chg 6.0 upd 11.0 <I> string

Kind

Kind="Toolbar" (also Toolbar1, Toolbar2 and Toolbar3)
Special Space row to use especially with Button type cells.
It has predefined some different default settings:
Space="4" NoUpload="1"
cellType="Button"
(since 7.0) The Toolbar1 and Toolbar2 kinds can be used when there are defined two bottom toolbars, just to better style them. (Since 11.0) the Toolbar3 to place between them for third and more toolbars.

Every grid has defined one default Toolbar in Defaults.xml. See Default Toolbar.
new 7.0 upd 11.0 <I> string

Kind

Kind="Topbar" (also Topbar1, Topbar2 and Topbar3)
Special Space row to use especially with Button type cells.
It has predefined some different default settings:
Space="0" NoUpload="1"
cellType="Button"
The Topbar1, Topbar2 kinds can be used when there are defined two top toolbars, just to better style them. (Since 11.0) The Topbar3 to place between them for third and more toolbars.
new 6.0 upd 10.0 <I> string

Kind

Kind="Tabber" (also Tabber2 since 10.0)
Special Space row to use especially with Button Tab type cells.
It has predefined some different default settings:
Space="-1" NoUpload="1"
cellType="Button" cellButton="Tab" cellRadio="1"
(Since 10.0) The Tabber2 does not show background for other cells than tabs.