Debugging and testing

TreeGrid documentation

Debug window

TreeGrid since 6.0 contains new feature for debugging: a debug window.
The window shows various information from TreeGrid runtime. Errors, warning, timer, status and so on.
This window is displayed on bottom of page by default, the position can be changed in Grid.css, CSS attribute GridDebugTag.
The window is shown automatically if some message is printed or on click to Debug icon on toolbar.
What will be printed to the debug window is controlled by <treegrid> / <bdo> attribute Debug.

To turn off the debug set <treegrid> / <bdo> Debug=""
To print the information to browser console instead of debug window set <treegrid> / <bdo> DebugTag="Console".
Global debugging settings.
A list of comma separated keywords specified what information will be printed to the Debug window. The keywords are case insensitive.
Default setting of Debug is to print all errors and warning, it strongly recommended to use at least this settings during development!
In final release you should set Debug="" to disable debugging.

Error	Prints errors (red , if something failed in grid - data communication, action, formula) and fatal errors (big red, TreeGrid cannot render)
Problem	Prints warnings (brown, something is wrong in TreeGrid, but it may or may not have influence on running), errors and fatal errors
Info	Prints status (black, something started, something finished, something called), timers (black, profiling information), warnings, errors and fatal errors
Check	Checks all input XML attributes and prints all unknown attributes that are not used by TreeGrid
	It is useful when upgrading to see unsupported attributes and also to find typing errors.
	Remember, it can do false alarms if you use custom grid, row, col, cell attributes, you can define them in DebugCheckIgnore.
	This option can remarkably slow down data loading in large grids!
IOError	Lists input / output data from erroneous communication
IO	Lists all input / output data. Sets *_Debug="In,Out" for every data source that has not set its Debug attribute, except Defaults and Text.
Cookie	Prints all information about grid configuration loaded from cookies.
Page	Prints status information for downloading pages, cells (DefaultsServer), AutoUpdate
Event	All mouse over events to see what part in grid is marked by what action event name. Useful for attaching events. Very talkative.

Debugging settings for appropriate data source (e.g. Upload_Debug="Out")
A list of comma separated keywords specified what information will be printed to the Debug window. The keywords are case insensitive.

In	Lists all input XML downloaded from server
Out	Lists all output XML uploaded to server
Raw	Lists all output XML directly as it is uploaded to server

Comma separated list of all attributes that Debug["Check"] will ignore.
These attributes will be ignored for every tag except <treegrid> / <bdo>.
These attributes are also ignored for every cell.
An id of existing tag on HTML page to print the debug information to.
If not set, default TreeGrid debug tag is created and used.
Since 12.1 If set to "Console", it prints the debug information to browser console.
Name of new window to print debug list to another window instead of DebugTag.
If set to 1 it alerts a message to user when communication with server failed.
Prints information to the TreeGrid Debug window
type is 0 - fatal error, 1 - error, 2 - warning (shown when Debug contains Problem), 3 - list (shown always), 4 - info (shown when Debug contains Info).
The arg are strings to display, are shown without any separator, every even string is displayed bold.
Called for every debug print, regardless on debug level, except input / output data.
Return true to suppress default action.
Can be used for redirecting the debug prints to another output.
level is debug level (importance), like type in Debug function.
arguments is array of the printed strings, the first item is also the level.
Prints to new window all actions done from last clearing undo. Prints only actions that can be undone.
It prints the actions as calling API methods, so the developer can easily redo the actions by simply adding the list to the script.
Works only when set <Cfg Undo='1'/> and Debug contains "Error".
It can be used when reporting bugs, to get the action list that led to incorrect behavior:

When you face some incorrect behavior during testing, press Ctrl+Alt+D to show the window.
Click to Test button to reload grid and to do automatically all the actions again.
If the problem rises again, it means it can be simulated by this action list.
Press again Ctrl+Alt+D and select and copy all the message text to clipboard and send it to developer with all the example data to simulate the bug.

Automated testing

If set to 1, many TreeGrid and Gantt HTML elements get unique id attribute to be accessible by automated testing tools like Selenium WebDriver.
It is strongly recommended to use the ids only for testing, not for controlling the TreeGrid HTML - for it use API instead.

The id has mostly this syntax: TGname-grid-row-col-part, where

Every cell, including header and space cells, gest id: TGCell-grid-row-col
The cell is <td> tag and includes also its side Icon (e.g. the Enum or Filter icon). It does not include its side Button (e.g. calendar, defaults or sort buttons) and tree button.

Because the side Icon is included in cell and cannot get its separate id, you can use for testing purposes right side Button instead of the Icon.
For Enum do <C Type="Enum" Icon="" Button="Enum"/>. For filter row do for every related cell <Filter Col1Button="Filter" ... />.

Every cell right side Button gets id: TGButton-grid-row-col
The id is attached to the <td> tag containing the button or icon.

Every tree part gets id: TGTree-grid-row-col
The id is attached to the <td> tag containing the whole tree part, not only the expand/collapse buttons.
For testing purposes you can attach the Expand / Collapse actions to the whole tree part by: <Actions OnClickTree="Expand OR Collapse" OnDblClickTree="Expand OR Collapse"/>

The resizing grid button (placed bottom right in the grid) gets id: TGResize-grid. In IE quirks mode there will be also defined TGResizeIE-grid for parent tag.

The <input> or <textarea> tag shown for in-cell editing in grid gets id: TGInput-grid.

In Gantt chart there are defined these ids:
Main bar: TGMainplan-grid-row-col-index; plan is number of plan, 0 for the first plan
Main bar side icons: TGMainplanSideIcon1-grid-row-col-index; TGMainplanSideIcon2-grid-row-col-index
Main bar side manual constraint: TGMainplanSideManual-grid-row-col-index;
Main bar side html: TGMainplanSideLeft-grid-row-col-index; TGMainplanSideRight-grid-row-col-index
Run bar: TGRun-grid-row-col-index
Run bar side manual constraint: TGRunSideManual-grid-row-col-index;
Run bar side html: TGRunSideLeft-grid-row-col-index; TGRunSideRight-grid-row-col-index
Flags icon: TGFlag-grid-row-col-index;
Flags text: TGFlagText-grid-row-col-index
Points: TGPoint-grid-row-col-index
Constraints: TGMinStart-grid-row-col, TGMaxStart-grid-row-col, TGMinEnd-grid-row-col, TGMaxEnd-grid-row-col
Gantt Base: TGBase-grid-col
Gantt Finish: TGFinish-grid-col
Gantt Header cell: TGGanttHeader-grid-col-index-date, where index is the GanttHeader index from 1 and date is starting date of the cell in milliseconds since 1/1/1970
Paged Gantt Header line: TGGanttHeaderPage-grid-col-index (defined only in GanttPaging when the header line is paged by GanttHeaderPaging)

In side pager there are defined these ids:
Every pager page gets id: TGPager-grid-name-index, where name is name of the pager and index is the pager page index from 0.
The pager caption gets id: TGPagerCaption-grid-name.

Every link to page in Pages type cell get id: TGPages-grid-row-col-page, where page is the index (from 1) the link points to.

Every item in DropCols type cell get id: TGDropCols-grid-row-col-index. The Text part of the DropCols get id: TGDropColsText-grid-row-col

In popup calendar dialog there are defined these ids:
Every calendar date button has this id: TGCalendar-grid-type-date, where type is: "WD" as workday, "Sa" as Saturday, "Su" as Sunday, "OM" as other month day, "Now" as today, "Sel" as selected day. date is date of the day as count of milliseconds since 1/1/1970
The time <input> gets id: TGCalendarTime-grid.
The empty button gets id: TGCalendarEmpty-grid.
The control buttons get ids: TGCalendarOk-grid, TGCalendarClear-grid, TGCalendarToday-grid, TGCalendarYesterday-grid.

In popup menu dialog (used by Menu, Enum Defaults, CfgMenu, Columns, ...) there are defined these ids:
Every menu item gets id: TGMenu-grid-itemid, where itemid is the id attribute of the item. If the menu item has not defined its id, it is its Name or Text with replaced all white characters by '_'
Every submenu item gets id: TGMenu-grid-submenuindex-itemid, where sumbenuindex is 1 for first submenu, 2 for the second submenu, etc..
The control buttons get ids: TGMenuOk-grid, TGMenuCancel-grid, TGMenuClear-grid.
The control buttons in submenu get ids: TGMenuOk-grid-submenuindex, TGMenuCancel-grid-submenuindex, TGMenuClear-grid-submenuindex.

The custom scrollbar (set by <Cfg CustomScroll/>) buttons get these ids: TGScrollUp-grid, TGScrollDown-grid, TGScrollLeft-grid-sec, TGScrollRight-grid-sec, where the sec is "Left", "Mid" or "Right"

Other internal ids used by TreeGrid: TGFastColumns-grid, TGHoverCursors-grid, TGFocusCursors-grid, TGTmpFocusGrid-grid
Special global internal ids: TreeGridStyle-prefix (the prefix is e.g. 'TS' for Standard style), TreeGridMessageStyle, TreeGridControls
Separator used in TestIds. Define it different is some your row id or column name contains the '-' to some character not used in any your row id and column name.