Universal HTML examples

You can run these examples locally or from your local or remote web server.



Asynchronous background (new style) communication with server.
Data are downloaded from server by JavaScript XmlHttpRequest object on background.
When debugging, you can set <treegrid ... Debug='3' ... > to see communication with server. It opens two new browser's windows. You can see XML data or error web server returned.
Remember, in Ajax communication, the data page must return only xml data, not any standard html tags like <html> or <!doctype>.
Remember, these examples are local examples without using any server side script, therefore you cannot upload any changes back.
See documentation AJAX versus submit and also tutorial Identifying rows when uploading.

Calculated tree
Main file Ajax.html
Layout file in AjaxDef.xml, data file in AjaxData.xml.
This is example of calculated bill in tree with summary columns and rows.
This example shows calculated tree - calculated columns, calculated grouped rows, more result fixed rows and many more.

Advanced table
Main file Table.html.
Layout file in TableDef.xml, data file in TableData.xml.
Example of various TreeGrid functions.
You can see header with more rows, with HTML code.
On bottom is filter row, by the filter you choose what rows to display.
In cells you can see many anomalies - spanning cells, changed formtatting, colors, alignment and values.
Right button in the cell shows user defined dialog for given cell by API call.
HTML type cell with button or link. User defined row without any predefined formatting. And so on.

Books example
Main file Books.html. Uses pictures from Books.jpg
Layout file in BooksDef.xml, data file in BooksData.xml.
Example of TreeGrid with variable row height, multiline editing, mask editing, image and link types.
The example has two modes switched by checkbox under the table.
In the read-only mode you can preview texts by focusing them or activate and move to links and images by clicking them.
In the write mode you can change texts, editing changes in multiline texts can be accepted by Alt+Enter.
You can also edit image and link sources by special masks, so you can change only few parts of edited string.
When editing multiline texts, you can see automatic height changing, but only to predefined maximal value.

E-shop example
Main file Eshop.html. The support script Eshop.js.
Layout file in EshopDef.xml, data file in EshopData.xml.
Example of application TreeGrid as eshop with some functions from Extended API. 
This is real application used in online purchase of TreeGrid component.

Paging example
Main file ../ServerDLL/ServerDLL.html. The support script ../ServerDLL/ServerDLL.js.
Uses file DataXYDef.xml as layout and DataXY.xml as data source. Where X is example index and Y is rows index (0='S', 1='', 2='E').
Remember data files for 50000 rows cannot be shown by this example without support server side paging and support script.

The main file ../ServerDLL/ServerDLL.html can be executed with various parameters:


Synchronous (old style) communication with server.
Data are included in page in hidden input. Changes are sent to server in the hidden input of submitted <form> on page.
Remember, these examples are local examples without using any server side script, therefore you cannot upload any changes back.
See documentation AJAX versus submit and also tutorial Identifying rows when uploading.

Calculated tree
Main file Submit.html
This is the same example as Ajax Calculated tree, but input XML data are included in HTML file, in hidden input.

Calculated tree no ActiveX
Main file SubmitNoActiveX.html
Example to show standard data loading inside html page with all data inside a html page to show using TreeGrid with forbidden ActiveX controls in IE.
This example has all data, default values and texts inside its file and does not use any external data file. The data are the same as in previous example.

Extended JavaScript API


See also Extended API documentation.

Extended API demonstration
Main file EAPI.html
Support JavaScript code is in file EAPI.js, print friendly version of code in EAPI.js.htm
Support code for specific XML dataEAPISup.js, this code is not indendended for demonstration.
The first example uses layout file in EAPIDef.xml, data file in EAPIData.xml.
Other examples use nearly all XML data of examples in this distribution.

In Extended API example you can test nearly all xml data files provided in this distribution version and see how Extended API can control these data.

In the bottom window are displayed all events fired by TreeGrid and logged from user event handlers by Log function. You can clear, disable event log or enable style events.

In the right window you can run functions to demonstrate TreeGrid Extended API. In the first combo you can select data example to load in grid. In second combo you can change TreeGrid's style. In next controls you can focus any cell. Color/Select/Filter any cell that contains given value. And also change any value of focused row.

By right click on any cell you can display pop-up menu and select presented options. For various cells and rows are different menu options, for header is there also another set of options.

Remember, some functions can be very slow, especially with logging enabled and large data.
Also remember, this example is universal and some functions can be unsuitable for some data examples.

Adding pages dynamically
Main file AddPage.html
Layout file in AddPageDef.xml, data file in AddPageData.xml.
Files with pages data are in 10 files from AddPagePage0.xml to AddPagePage9.xml.
This example demonstrates using server paging and also adding pages dynamically by script.
The new page is added, when user reaches the end of table by scrollbar.