Editable JavaScript TreeGrid

Version 3.7


15th May 2006
TreeGrid 3.7 released

Added possibility to choose what to send to server - changes only, configuration, whole xml, etc.
Added support for many invisible columns, now grid supports unlimited count of invisible columns.
Updated dragging functions among more grids. You can see this feature in Expert tutorial, the fifth example Dragging.
From Standard and Grand license texts was removed obligation of displaying a link to www.treegrid.com.


1st May 2006
TreeGrid 3.6 released

Added support of variable row height. Now all rows can have different height.
Added cell merging / spanning feature.
Added support of multi line editing in text area.
You can see new features in Expert tutorial, the first example Expert editing and cell spanning.


1st May 2006
TreeGrid server 1.2 released

Added Linux version - TreeGrid.so library.


24th April 2006
TreeGrid 3.5 released

Updated cell formats for numbers, dates and strings, new documentation added.
Added menu for selecting displayed and hidden columns.
New functions for selected rows copying and moving.
New tutorials added: Advanced, Expert.


13th April 2006
TreeGrid 3.4 released

The examples were completely rewritten. Added examples for ASP.NET (C#,Visual Basic), PHP, JSP (Java), HTML.

Created tutorials to show using TreeGrid from the simplest empty grid to tree, calculations and other advanced functions.
You can see tutorials there: Basic, Advanced, Calculations

Added sessions support to preserve state during client / server communication.


10th April 2006
TreeGrid server 1.1 released

Added support for UTF8 strings (for PHP). Added exported Java functions. Documentation were rewritten.

TreeGrid.dll is now thread safe to avoid server errors when many requests income at once.


6th February 2006
TreeGrid 3.3 released

In version 3.3 there were images shrunk to only two files, 5 kB long. Now there is no need to caching images any more.
All required files were moved to one default directory. Now all required files, including script, images, styles, texts and default settings are smaller then 100 kB.

Added copy & paste support. Now you can copy selected row values to clipboard and paste them back to grid or to any text editor or spreadsheet program like MS Excel. You can also paste values from any editor to grid. This function is not available in Opera.

Updated cell formulas. Many aggregate functions functions added. Debug mode for cell formulas.

Added sample ASP.NET web page to show data communication by page submit and ASP.NET using DataTable to access a database. Updated ASP.NET web service sources.

26th January 2006
TreeGrid 3.2 released

Version 3.2 supports fully asynchronous communication with server.
There have been added examples to demonstrate other TreeGrid capabilities such as user rows, html code in cells, buttons, user dialogs and so on.
TreeGrid.dll was updated to 1.0.2.

16th January 2006
A section for registered users added

Now are latest updates of registered version available for customers in section Download / Registered version. The customers can download latest version and documentation according to their serial code.

15th January 2006
TreeGrid 3.1 released

Version 3.1 contains full support of server paging with sorting, filtering and pre-calculations. Supports native TreeGrid.dll server component or any user server script communicating in described way. TreeGrid now supports up to million rows.

15th January 2006
TreeGrid.dll 1.0 released

Now is available the server side support component. This is DLL library for Windows systems. This DLL supports server side paging, updating, sorting, filtering and pre-calculations upon XML file or data. The library is written in pure C++ and is much faster and much less memory consuming than any code you can write in managed languages as C#, Visual Basic or Java. The DLL can be used in any server script languages that can use DLL on Windows systems (ASP.NET, Java servlets / JSP, PHP, ...).

12th December 2005
TreeGrid 3.0 released

New major version was released.  Data format completely switched to XML. Internal code was completely rewritten and now is much faster. TreeGrid now supports two ways of paging. TreeGrid now supports up to 20 000 rows with sorting, filtering and calculations of all rows. Many other changes and updates.

TreeGrid Description

EJS TreeGrid is DHTML component written in pure JavaScript to display and edit data in table, grid, tree view or grid with tree on HTML page.

The data can come from many data sources: static XML file, XML web service, SOAP web service, or any page generated by PHP, JSP, ASP, ASP.NET, or any other server script. Changed data can be uploaded to server without submit (AJAX) the page. Methods of upload can be HTML form POST or SOAP XML. Changed data can also be uploaded by standard form/page submit (in hidden input, for example) or in any custom way of submit. See documentation.

Input / output data format is XML tree with or without predefined DTD. Rows are identified by id attribute. In this format the data can be stored on server or can be easy converted to any other representation, database table for example.

For Windows and Linux systems is available server side component to support up to million rows with sorting, filtering and calculations capabilities. This is standard DLL / SO and can be used in any server script environment that can use DLL on Windows systems or SO on Linux systems (ASP.NET, Java servlets / JSP, PHP, ...). The DLL / SO is very fast and thin.

EJS TreeGrid  is client component and runs on client browser. It is compatible with the most of standard browsers. It does not require any installation or other components on client or server side. It does not need any JavaScript code to use TreeGrid on a page. It has very small code (about 80 kB). It is very easy to build the control into html page in any server script environment (ASP, ASP.NET, PHP, JSP, ... , any XML web service). In this environments you need only code for reading and writing data in XML format. Bandwidth between server and client is reduced to minimum because all actions are performed on client side and from and to server are sent just pure data.


Data communication


Using TreeGrid on HTML page

You don't need to write any own JavaScript code to use TreeGrid on your page. But you can write JavaScript functions as event handlers to better control TreeGrid look and behavior.


This way you can use for static HTML pages or for any server script environment.


Include into <head> section TreeGrid core code and css styles:

<link id=GridCSS href="../Grid/Grid.css" title="GridStyle" type="text/css" rel="stylesheet">
<script src="../Grid/GridE.js"> </script>
If these files resides somewhere else, you have to change their path.

Now include on the place where you would display a TreeGrid component the <div> or any other block tag. This tag is called TreeGrid Main tag. You can set style of this tag (background, border, etc.), but you must set width and height (in style) of this tag to any other value than "auto" to display TreeGrid properly. The Main tag can be also any server control to control this tag from server script, but always it needs to be a block (not inline) tag. You can also have more TreeGrids and Main tags on one page.

Into the grid Main tag place <treegrid> tag, with attributes specifying TreeGrid data sources and other settings. Data sources are usually different for structure layout (Layout_), data (Data_) and upload (Upload_) url. Data source can be url to external file (grid can upload changes to this url), form input control (grid submits this form with changes) or direct string with data. Even more data sources can be used for data and structure.

<div style="width:600px;height:400px;"> <treegrid Layout_Url="../data/Data1Def.xml" Data_Url="../data/Data1DCS.xml"> </div>
That is all. Now you can send and receive data to and from server, where you can generate and process this data. For many server script environments you can use predefined code for TreeGrid data processing, see below. For other <treegrid>attributes see documentation.
You can also write your JavaScript code, especially for TreeGrid events to change TreeGrid look and behavior.

Simple but whole HTML page with the TreeGrid can look like this:

        <link id=GridCSS href="../Grid/Grid.css" title="GridStyle" type="text/css" rel="stylesheet">
        <script src="../Grid/GridE.js"> </script>
        <div style="width:100%;height:98%;"> <treegrid Layout_Url="../Data/CalcDef.xml" Data_Url="../Data/CalcData.xml"> </div>

Show the example. Show data layout. Show data.

See tutorials:
Basic, Advanced, Calculations, Expert

Server side component - TreeGrid.dll

On server side you can use prepared TreeGrid.dll/so to generate and update data. The DLL supports paging, updating, sorting, filtering and pre-calculations. The DLL works upon given XML data or file.

This library is expected to be used with large grids with more then 1000 rows. For small grids you can use client functions without any sophistical server code.

This is DLL / SO and now is available for Windows and Linux systems. The library is written in pure C++ and is much faster and much less memory consuming than any code you can write in managed languages as C#, Visual Basic or Java. The DLL can be used in any server script languages that can use DLL on Windows or SO on Linux systems (ASP.NET, Java servlets / JSP, PHP, ...). In downloadable evaluation version are examples of using TreeGrid server in ASP.NET (C#, VB), JSP (Java) and PHP.

See documentation.


Of course, you don't need to use this DLL, you can use any own server script to generate and update data.


How many rows TreeGrid can handle

TreeGrid can handle unlimited count of rows and unlimited levels of tree. The row's count is limited by duration of rendering and data downloading. The real counts vary according to paging type used. For pure grids can be used none, client or server paging, for tree, in addition, none, client or server child paging.

Without paging
All rows are displayed at start and are still rendered, therefore all operations are fast.
Depending on column count, TreeGrid can handle about 300 - 600 rows without paging.

Client paging
All data are downloaded at start and all operations (sorting, filtering, calculations) are done offline without need of server support. But not all rows are still visible and after some operations (sorting, filtering) must be re-rendered. Pages are rendered on demand.
Depending on complication of operations and data length, TreeGrid can handle up to 20,000 rows with client paging.

Server paging
Data are downloaded and rendered only on demand. Server must be able to sort, filter and pre-calculate rows.
Limitations depends on speed of server script and operations requested. With TreeGrid.dll you can have about million rows. If you use some SQL database, limits will growth to couple of millions of rows, depending on efficiency of your SQL procedures. For too many pages, it is better to set the option AllPages to 0 (One page visible at once). Also if TreeGrid has too many pages (tents thousands of pages), there can problem with aggregate calculations of all rows and with page names on pager.

The paging and limits listed above are related to pure grids and root nodes of the tree. If you send to client nodes collapsed you can use child paging to grow the limits, especially for server paging.
For tree there is one limitation, one node can contain up to about 500 immediate child rows, because all immediate children are rendered at once when expanding node. Of course, real value of limit depends on column count.
If you have huge tree, send to client most nodes collapsed, because expanded rows must be rendered at once and above limitation is used for all expanded children, not only immediate.

Examples and documentation

Live examples

Main examples are all in one static page with different data sources read and written by ASP.NET web service from and to static XML file. These examples show the most of features of TreeGrid. You can select data source in select box in bottom of page, you can also select number of rows, paging type and grid style. You can also update changes to server. Show the examples


Tutorials are static HTML pages with many TreeGrids on page and every grid shows some technique.

Basic tutorial shows how to create empty grid, variable and fixed rows, variable and fixed columns, tree and changing basic setting.

Advanced tutorial shows using column and cell types and formats, default rows and defaults children, filters, user rows and advanced header.

Calculations tutorial shows using calculated columns, fixed and tree calculated rows and calculation order.

Expert tutorial shows using user rows and columns, header and paging.


Simple example without any support JavaScript code or complicated HTML code. You can modify data but you cannot update changes to server. This example is described in previous section. Show the example. Show data layout. Show data.


Show online documentation

Other documentation is available (Simple API description, Extended API description), if you purchase the component. Or if you need it to special tests, just email me.


Evaluation version
This version includes TreeGrid core files, documentation, TreeGrid server library, learning tutorials, examples for ASP.NET, JSP, PHP and HTML.
Examples and tutorials can be executed on local computer, just in browser. Remember, in IE on Windows XP SP2 you must confirm JavaScript execution if you browse locally (fortunately, on server it is not needed).
Or you can test examples on your www server (local / remote, IIS / Apache / ...., Windows / Linux / ... ).

Test XML data (3 MB)
XML data with 50000 rows for all four examples in evaluation version to test them on your server.

Other XML formats (11 MB)
XML data in other three formats to show differences and to help to choose appropriate format.

Registered version
There you can download latest version of TreeGrid according to your serial code.


Licensing and prices

Support and updates

Purchase online

You can purchase TreeGrid component online via eSellerate at my online store. If you don't want to pay by credit card or you are from EU and are not VAT payer, contact me on e-mail and we choose another way of payment.


If you have any questions about TreeGrid or you need to add any new function to TreeGrid or you want to purchase TreeGrid using another method of payment then credit card, email me: treegrid@coqsoft.com.


Jan Kohout, 2004 - 2006

The company is registered in Czech Republic (the part of European Union) with Trade Certificate number 722 72 384 since 10/2/2001