TreeGrid v6.0

Cell side buttons

TreeGrid documentation index

 

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

 

<C> <cell>        string    Button                                                                                                                                                         chg 6.0 .

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.

 

 

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 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 should not be used explicitly.

 

<C>                   int          WidthPad           [20]                                                                                                                               chg 6.0 .

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!

 

<Space cell>    int          ButtonWidth   [20]                                                                                                                               new 6.0 .

Width of right side Button in Space row. In pixels.

 

<Space cell>    string    ButtonAlign     [‘Right’]                                                                                                                         new 6.2 .

In Space row the button can be displayed also on left side by ...ButtonAlign=‘Left’.

 

<C> <cell>        string    ButtonText                                                                                                                                                          .

<BUTTON> caption for custom Button type Button

HTML code for custom Button type Html.

 

<Actions>                      ButtonClick ...F                                                                                                                                              .

Calls OnButtonClick event for actual or focused cell with custom Button type Button, Icon or Html

 

API event          bool       OnButtonClick           (TGrid grid, TRow row, string col, int x, int y)                                              upd 6.0 .

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.

 

<XML event>    void       OnClickSide     (TGrid Grid, TRow Row, string Col, TEvent Event)                                                 new 6.0 .

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

 

<C> <cell>        string    Icon                                                                                                                                                                new 6.0 .

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.

 

There are also four values Date, Sort, Filter, Enum that are filled automatically by grid and should not be used explicitly.

 

<C> <cell>        string    IconAlign            [“Left”]                                                                                                                          new 6.0 .

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.

 

<C> <cell>        int          IconWidth          [20]                                                                                                                                new 6.0 .

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.

 

<Space cell>    int          Height                                                                                                                                                          new 7.0 .

Height of the cell in pixels.

Set it when the Icon in Space cell is not visible whole

 

<Actions>                      IconClick ...F                                                                                                                                       new 6.0 .

Calls OnIconClick event for actual or focused cell with custom Icon type Icon

 

API event          bool       OnIconClick     (TGrid grid, TRow row, string col, int x, int y)                                                           new 6.0 .

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.

 

<XML event>    void       OnClickSide     (TGrid Grid, TRow Row, string Col, TEvent Event)                                                 new 6.0 .

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.