Panel with more buttons - Panel

TreeGrid documentation

Panel type displays one or more clickable icon buttons in one cell.
To define Panel type, set column or cell attribute Type to "Panel".
There is a shortcut in XML, as column <Panel /> instead of <C Name="Panel"/>.
If row Kind is set to "Panel" it sets Type="Panel" for every row cell and also assigns default row "Panel" with the panel column actions and definitions.
There is a shortcut in XML, as row <Panel /> instead of <I Kind="Panel"/>.
If the Panel type cell will be colored like normal cell.

Predefined Panel column

Every grid has predefined one column as Type="Panel" Name="Panel" always displayed on grid left side.
You can move this column to another section by placing <Panel Name="Panel"/> to any column section to place the panel here.
Or to hide the default panel, set <Panel Visible='0'/> in the root.
To not let user to show the panel from menu set <Panel Visible='0' CanHide='0'/>
The default panel is defined by XML root tag <Panel>.
Grid can have more standard panels defined by <Panel/> tag with different Name.

The default Panel can show up to four predefined buttons, always in this order: Move, Select, Delete and Copy.
In Header row there are predefined buttons: MoveAll, SelectAll, DeleteAll, CopyAll.
Prior to 12.0 the Header buttons were named Move, Select, Delete, Copy and were identified in events as HeaderXXX instead of PanelXXX.
If the default Panel button Move / MoveAll is visible. This button is hidden also if <Cfg Dragging="0"/>. This button is inactive when the row has CanDrag='0'.
Dragging this button moves the row. Use this button if dragging row by cells has different function like selecting cells.
Used only if the Buttons and the cell value are not set.
If the default Panel button Select / SelectAll is visible. This button is hidden also if <Cfg Selecting="0"/>. This button is inactive when the row has CanSelect='0'.
Click to this button selects the whole row. Dragging this button selects rows range.
(Since 9.2) If set to 2, it is similar to 1, but the button is checked only if the whole row is selected, not only individual cells.
Used only if the Buttons and the cell value are not set.
If the default Panel button Delete / DeleteAll is visible. This button is hidden also if <Cfg Deleting="0"/>. This button is inactive when the row has CanDelete='0'.
Click to this button deletes row or undeletes deleted row.
Used only if the Buttons and the cell value are not set.
If the default Panel button Copy / CopyAll is visible. This button is hidden also if <Cfg Copying="0"/>. This button is inactive when the row has CanCopy='0'.
Click to this button shows popup menu for copying and adding rows. The menu is defined by attribute PanelCopyMenu.
Used only if the Buttons and the cell value are not set.
For 1 it displays standard panel as one image to speed rendering up. Used only if the Buttons and the cell value is not set.
For 0 it displays all icons separately.

Custom panel

Panel can contain one or more custom buttons set in cell value or by Buttons attribute.
You can specify the custom button name in value or Buttons and set its parameters as separate attributes.
The custom button name is set as xxx in the next documentation.
Comma separated list of buttons on panel.
One panel button can be one of predefined buttons or any custom button name. The predefined buttons are:
Move (move row), Select (select row), Delete (delete row), Copy (copy or add row),
(since 12.0) MoveAll (not used), SelectAll (select all rows), DeleteAll (delete selected rows), CopyAll (copy or add selected rows),
(since 12.0) ColMove (move column), ColSelect (select column), ColDelete (delete column), ColCopy (copy or add column),
(since 12.0) ColMoveAll (not used), ColSelectAll (select all columns), ColDeleteAll (delete selected columns), ColCopyAll (copy or add selected columns),
(since 6.4) If button name is set to Empty or to empty string, empty space is shown instead of button, EmptyWidth pixels wide.
Since 12.0 it is read from row with Kind="Panel" instead of column.
If the custom button has not defined its icon, it is rendered as HTML <BUTTON>, see UseButton.
For example <C Name='Col1' Buttons='Select,Add,Delete,Edit' Add='Add.gif' Edit='../Icons/Edit.gif' EditWidth='20' />
For backward compatibility with prior to 12.0, the Move, Select, Delete and Copy buttons in Header row are automatically renamed to MoveAll, SelectAll, DeleteAll and CopyAll. And checks row CanMove, CanDelete, CanSelect and CanCopy attributes and for 0 hides the button.
Comma separated list of buttons on panel.
The same as Buttons, but it is set in cell value and can be also calculated by Formula.
Image url for the custom panel button.
Since 12.0 it can be used also for standard Panel buttons like Select or Delete. For Select the on state can be set by xxx1 attribute like <Panel Select="Off.gif" Select1="On.gif"/>.
Since 12.0 it is read from row with Kind="Panel" instead of column.
If this attribute is missing, the custom panel button is displayed as <button> tag with caption xxx.
Width of the custom panel button.
Since 12.0 it can be used also for standard Panel buttons like Select or Delete with custom icon.
Since 12.0 it is read from row with Kind="Panel" instead of column.
Default value is set in Grid.css, class GxPanelImage.
Standard column, row, cell or Actions attribute containing JavaScript code.
It is called on click to the cell part, panel button. Since 12.0 it is called also for Header Panel.
It is standard TreeGrid mouse event, here is just mentioned to not forget its possibility when handling Panel button clicks.
Example: <I Col1='Add,Select' Add='Add.gif' Col1OnClickPanelAdd='alert("clicked add in column "+Col);'/>
The OnClickPanelxxx replacement for Header row.
Menu for the individual Panel button.
Tooltip text for Panel button. Since 12.0 it is called also for Header Panel.
Since 12.0 it is read from row with Kind="Panel" instead of column.
Tooltip text for Panel button in Header row
Mouse cursor displayed on mouse hover Panel button. Since 12.0 it is called also for Header Panel.
It can be standard CSS cursor name: auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help.
It works only for image buttons, not for <button>.
Since 12.0 it is read from row with Kind="Panel" instead of column.
The PanelxxxCursor replacement for Header row.
Standard Formula attribute for Calculated row, here is stated just to not forget its advantage for Panel buttons.
The formula can return a comma separated list of the panel buttons for the row - you can return different buttons lists according to various formula sources.
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.