Cell side buttons

TreeGrid documentation

Any cell can display a right or left side button.
It is also possible to have both left and right side buttons in one cell.
And it is also possible to have two right buttons (but not two left).
Only right side Button can display custom HTML code or <BUTTON> tag. But not in Space row.

Right side button

Cell right side button with various functionality. It can be used along with Icon.

empty string	To hide the predefined button for Date type.
icon source file	Shows custom icon, the icon width is set by WidthPad for non Space cell and by ButtonWidth for Space cell. The Button is an URL to some GIF, PNG, JPG. On mouse click it calls custom event OnButtonClick. This button type is identified as "Icon" in events. The URL is relative to actual page URL, not to Grid.css, not to XML data!
Defaults	Shows Defaults icon for popup defaults menu. On mouse click it shows popup menu with predefined default values to select one or more for them like in combo box. The list of default values is defined by Defaults attribute.
Dates	Shows Dates icon for popup Dates menu.
Expand	Shows Expand / Collapse button to expand rows and / or columns. See column tree.
Check	Shows checkbox, see Side checkbox.
File	(new 12.0) Shows File icon, usually to choose files for File type cell.
Clear	(new 12.0) Shows Clear icon to clear the cell value.
Button	Shows HTML <BUTTON>, the button text is specified by ButtonText attribute. Remember, the width of the button must be the same for all cells in the column and is specified by WidthPad attribute. After a user clicks the button, it is called OnButtonClick event. Can be set only to Button, not to Icon. And cannot be set to Space cell.
Html	Any HTML code displayed as is. It can be <button>, <img>, <a> tag or any other HTML code. It is specified by ButtonText attribute. It can contain also any predefined JavaScript onclick code. Remember, the width of the button must be the same for all cells in the column and is specified by WidthPad attribute. After a user clicks the button, it is called OnButtonClick event. Can be set only to Button, not to Icon. And cannot be set to Space cell.

There are also four values Date, Sort, Filter, Enum that are filled automatically by grid and are used explicitly only in rare cases, e.g. to show it in Button instead of Icon or vice versa. Width of right side Button in non Space row. In pixels.
It is the same for whole column, so all right side buttons in one column have the same width!
It affects also sort icons in header! To avoid it, change the header button to icon by <Header Col1Icon='Sort' Col1IconAlign='Right'/>. Remember, it will overflow the icon if the caption is too wide. Width of right side Button in Space row. In pixels. In Space row the button can be displayed also on left side by ...ButtonAlign='Left'. <BUTTON> caption for custom Button type Button.
HTML code for custom Button type Html. Calls OnButtonClick event for actual or focused cell with custom Button type Button, Icon or Html. Called on click to custom Button type Button, Icon or Html.
x, y is click position inside the button.
Return true to suppress the default action, especially for Button Html.
For read only cells with only one side button is called for the whole cell, opposite to OnClickSide. Standard column, row, cell or Actions attribute containing JavaScript code.
It is called on click to left or right side Button or Icon.
It is standard TreeGrid mouse event, here is just mentioned to not forget its possibility when handling custom side button clicks.
Example: <I Col1OnClickSide='alert("clicked column "+Col);'/>
If the cell has both Button and Icon, you can distinguish the clicks by defining OnClickSideButton and OnClickSideIcon events.
For read only cell with only one side button is this event called only on click to the button, but the OnClickSideButton / Icon is called for click to the whole cell.

Left side icon

Cell left side button with various functionality. It can be used along with Button.
It can be used also to set background image of the cell (Icon='Icon' IconWidth='0' IconSrc='url').
It can be also positioned right to replace Button or even to show two side right buttons, but check the problems in IconAlign description. The Icon rendering is slightly faster than the Button.

empty string	To hide the predefined icon for Enum type.
icon source file	Shows custom icon, the icon width is set by IconWidth. The Icon is an URL to some GIF, PNG, JPG. On mouse click it calls custom event OnIconClick. This button type is identified as "Icon" in events. The URL is relative to actual page URL, not to Grid.css, not to XML data!
Defaults	Shows Defaults icon for popup defaults menu. On mouse click it shows popup menu with predefined default values to select one or more for them like in combo box. The list of default values is defined by Defaults attribute.
Dates	Shows Dates icon for popup Dates menu.
Expand	Shows Expand / Collapse button to expand rows and / or columns. See column tree.
Check	Shows checkbox, see Side checkbox.
File	(new 12.0) Shows File icon, usually to choose files for File type cell.
Clear	(new 12.0) Shows Clear icon to clear the cell value. Shown automatically for not empty File type cell.

There are also four values Date, Sort, Filter, Enum that are filled automatically by grid and are used explicitly only in rare cases, e.g. to show it in Button instead of Icon or vice versa. Position of the cell side Icon button. By default is the Icon placed left side of the cell.
Supported values are "Left", "Right", "Center".
You can place the icon on the right side by setting IconAlign="Right". Use it only if Button is already set or you cannot use Button due WidthPad difference.
You can place the icon center by setting IconAlign="Center", it is intended only for empty cells or to use Icon as background image.
Attention, if the Icon is placed right side and the cell content is wider than the cell, the text is displayed through this icon in many browsers due wrong implementation of CSS right padding. For such cells prefer the Button attribute if possible. Width in pixels of custom Icon (Icon="icon source file").
The icon should not be wider than 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. Height of the cell in pixels.
Set it when the Icon in Space cell is not visible whole. Set it to 1 if any custom image url contains white spaces or ' ( ) & Calls OnIconClick event for actual or focused cell with custom Icon type Icon. Called on click to custom Icon type Icon.
x, y is click position inside the icon.
Return true to suppress the default action.
For read only cells with only one side button is called for the whole cell, opposite to OnClickSide. Standard column, row, cell or Actions attribute containing JavaScript code.
It is called on click to left or right side Button or Icon.
It is standard TreeGrid mouse event, here is just mentioned to not forget its possibility when handling custom side button clicks.
Example: <I Col1OnClickSide='alert("clicked column "+Col);'/>
If the cell has both Button and Icon, you can distinguish the clicks by defining OnClickSideButton and OnClickSideIcon events.
For read only cell with only one side button is this event called only on click to the button, but the OnClickSideButton / Icon is called for click to the whole cell.