Universal HTML examples


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

Example index

Basic AJAX
Demonstration of many basic and advanced TreeGrid features
The First example A demonstration of the most of TreeGrid features link
Large table without paging A demonstration of large grid with 1000 rows without paging and all TreeGrid features in such grid link
Calculated tree A demontration of calculated bill in tree with summary columns and rows link
Advanced table A demontration of various TreeGrid functions link
Books example A demontration of variable row height, multiline editing, mask editing, image and link types link
 
Basic <form> Submit
Synchronous (old style) communication with server.
Calculated tree The same example as Ajax Calculated tree, but input XML data are included in HTML file, in hidden input link
Calculated tree no ActiveX Places all data inside a html page to show using TreeGrid with forbidden ActiveX controls in IE. link
 
External objects - Flash and SilverLight
How to place external objects like Adobe Flash or Microsoft SilverLight to TreeGrid cells. And how to control and change them dynamically on fly.
Dynamic Adobe Flash in cells A demonstration how to display any Flash object inside TreeGrid cells. link
Dynamic Microsoft SilverLight in cells A demonstration how to display any SilverLight object inside TreeGrid cells. link
 
Applications
Few more complex applications with TreeGrid
Pivot Table A demonstration of TreeGrid application creating Pivot table - two dimensional summary table. link
E-shop Example of application TreeGrid as eshop with some functions from Extended API. link
 
Extended JavaScript API
Few examples of controlling TreeGrid from JavaScript
Extended API demonstration 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. link
Adding pages dynamically A demonstration of using server paging and also adding pages dynamically by script. link
Custom edit Example of TreeGrid with custom editing control. link

Basic AJAX


Demonstration of many basic and advanced TreeGrid features.
Basic usage of 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.

The first example from TreeGrid home page
Main file First.html
Layout file in FirstDef.xml, data file in FirstData.xml.
This examples demonstrates the most of TreeGrid features:
Tree, sorting, grouping, filtering, searching, calculations, resizing and moving columns, row dragging, row manipulations, selecting rows, fixed rows and columns, many cell types, popup default list, calendar, formatting values and many more.

Large table with 1000 rows without paging
Main file Large.html
Layout file in LargeDef.xml, data file in LargeData.xml.
This examples demonstrates many TreeGrid features in large grid with 1000 rows to compare execution times:
Sorting, Grouping, Filtering, Paging, Print, Export, Tree, Debug window

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.

Basic <form> Submit


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.

External objects - Flash and SilverLight


How to place external objects like Adobe Flash or Microsoft SilverLight to TreeGrid cells. And how to control and change them dynamically on fly.

Dynamic Adobe Flash in cells
Main file Flash.html.
Uses FlashCanvas.swf file as base source for all Flash objects in grid.
Data file in Flash.xml.
 This example demonstrates how to display any Flash object inside TreeGrid cells.
Also demonstrates dynamical creating / updating the Flash objects according to some condition, for example value in other cell.
And finally demonstrates displaying HTML content and Flash object within one cell.

Dynamic Microsoft SilverLight in cells
Main file SilverLight.html.
Uses SilverLightEmptyObject.xaml file as base source for all SilverLight objects in grid.
Data file in SilverLight.xml.
 This example demonstrates how to display any SilverLight object inside TreeGrid cells.
Also demonstrates dynamical creating / updating the SilverLight objects according to some condition, for example value in other cell.
And finally demonstrates displaying HTML content and SilverLight object within one cell.

Applications


Few more complex applications with TreeGrid.

Pivot table
Main file PivotTable.html. The support script PivotTable.js.
Layout file in PivotTableDef.xml, data file in PivotTableData.xml.
 A demonstration of TreeGrid application creating Pivot table - two dimensional summary table.
The Pivot table is automatically generated from values in left source table according to selected columns for rows, columns and data.
The Pivot table is automatically recalculated after any change in the source table data cells and recreated after any other change in the source table.

E-shop
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.

Extended JavaScript API


Few examples of controlling TreeGrid from JavaScript. 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 FirstDef.xml, data file in FirstData.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.

Custom edit
Main file CustomEdit.html
Data file in CustomEdit.xml.
Example of TreeGrid with custom editing control.
To show custom editing control in cell use API events OnCustomStartEdit and OnCustomEndEdit
This example shows custom <input> tag with dynamic menu showing predefined default value starting with entered string