Back to TreeGrid home

Live examples

 

Main example - paging

This example shows various TreeGrid features with server paging on table with 2,000, 10,000 and 50,000 rows.
It demonstrates main TreeGrid features like sorting, grouping, filtering and export to Excel. Supports updates to server.

Show the example

  
 

Interactive Gantt chart - action schema

A demonstration of TreeGrid application showing Gantt chart - timetable of tasks and their completion.
The Gantt chart is automatically generated from values in Date and Complete columns and is automatically updated after every change of task date(s) or task completion.
The Gantt chart is fully ineractive, all values can be changed also by mouse in the Gantt chart itself.
The date range can be set by calendar (by clicking to date or dragging more dates) or by entering date range. The first and last date in range are separated by tilde (~), ranges itself by semicolon (;).

Show the example, Show data layout, Show data.

  
 

Large Gantt chart with 3000 rows

A demonstration of TreeGrid application showing large Gantt chart - timetable of tasks and their completion.
It is similar to previous example, but uses client paging and show 3000 rows table.

Show the example, Show data layout, Show data.

  
 

Simple Gantt chart with freedom for levels

A demonstration of TreeGrid application showing simple Gantt chart - timetable of tasks and their completion.
This example shows tree structure, with freedom for levels.
It also uses only base Gantt attributes without zoom or flow.

Show the example, Show data layout, Show data.

  
 

A bill - calculated tree

Demonstration of TreeGrid with calculated columns, calculated tree, fixed calculated result rows.
You can change cell values to see automatic recalculations.
You can also add new rows or delete old.
You can also move rows by dragging them by mouse.
You can select rows by left panel button or by space key and delete or move them all.
Other standard functions you can try: column resizing, column moving by mouse. Column hiding / displaying (from menu displayed by clicking toolbar button). And many others.

Show the example, Show data layout, Show data.

  
 

Advanced table - various

Demonstration 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 formatting, 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.

Show the example, Show data layout, Show data.

  
 

Books - multiline editing

Demonstration 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 or Ctrl+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.

Show the example, Show data layout, Show data.

  
 

Photoalbum - images

Demonstration of TreeGrid with variable row height, image lists, user rows.
This is real application to preview photos.
There are many photos from New Zealand and Bulgaria.

Show the example

  
 

Dynamic Adobe Flash in cells

This examples 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.

Show the example, Show data.

  
 

Dynamic Microsoft SilverLight in cells

This examples 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.

Show the example, Show data.

  
 

PivotTable - dynamic creating

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.

Show the example, Show data layout, Show data.

  
 

Schools - Lists and ratings

Complete application to demonstrate generating from and updating to different database tables with various structure.
Demonstrates also server child paging feature (loading children on demand).
And also custom AJAX call.
The application show list of schools that can be sorted and filtered.
The records can be added/deleted or modified by logged user or admin.
The records can be rated and reviewed by visitors.
All the changes are persistent for 12 hours from the last access and are visible only for your IP.

Show the example

  
 

E-Shop - real application

Demonstration of eshop done by TreeGrid.
Example uses some functions from Extended API.
This is real application used in online purchase of TreeGrid component

Show the example, Show data layout, Show data

  
 

Extended JavaScript API

Demonstration of various functions and events from Extended API.
How to control the grid from JavaScript.
In Extended API example you can test many xml data files from other examples.
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 theright 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.

Show the example, Show support script.

  
 

1 000 000 rows table example

This example shows 1 000 000 rows in table without tree.
This example also shows using aggregate calculations, adding and deleting rows in such large table.

Show the example

  
 

Sharing and synchronisation

This example demonstrates sharing data among more clients and automatic updating client's data after data on server are modified by another client.
This example uses server DLL upon static XML data file.

Show the example

  
 
Many other examples are in downloadable trial version and also in tutorials.