Live examples

border

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

border
border

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.

border
border

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.

border
border

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.

border
border

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

border
border

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

border
border

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

border
border

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.

border
border

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

border
border

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

border

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

statistics