Editable JavaScript TreeGrid

Version 3.7

News

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.

Basics

• Compatible with Internet Explorer 5.0+, Mozilla 1.0+, Mozilla Firefox 1.0+, Netscape Navigator 6.0+, Opera 7.60+.
• TreeGrid can handle up to about 20 000 rows offline and up to millions rows online using paging and AJAX. New in v3.0
• Various types of paging with sorting, filtering and calculations for all pages. New in v3.0
• You don't need to write any JavaScript code to use TreeGrid on your page.
• There are no other requirements on client side.
• All operations are performed on client side, without sending data to server. (If no server paging used)
• Data format is small, server sends only values, not graphic formatting.
• TreeGrid code is about 80 kB long.
• User script extension by defined events in TreeGrid. For data validation or changing value after edit, to approve an operation, to change TreeGrid look, to change state colors, and many more.
• Extended API to control all functions of TreeGrid from JavaScript code
• Visual settings by CSS styles.
• Row and cell colors by their state (changed, deleted, added, focused, selected, mouse hover, editable, ...).
• User settings (column visibility, position and size, type of sorting, filters, all grid settings) are saved at client into cookies or can be sent to server.
• More tree grids on one page, possible operations among them (dragging rows for example). Different styles/images/colors for them are possible !
• Master / detail grids or even tree grids.
• Calculated cells like in MS Excel, include mathematic, aggregate (sum, count, sumif, ...), statistic and user-defined functions. Or any JavaScript code in formulas.
• Filters like in MS Excel. For any column user can specify an expression and operator to filter rows by this column's values. More filters for one grid.
• Control panel for TreeGrid operations. Can be inside or outside of TreeGrid. All its buttons can be controlled from events, or be hidden.
• Server side paging, validation, sorting and filtering support. Cells can be marked as wrong with error title sent from server. New in v3.1
• Detailed documentation of TreeGrid usage, events, data format, API and cell formulas.

Data communication

• The input/output data format is be XML document parsed by any XML parser. XML document can be sent as a document or as a coded string
• The XML is well formed and has predefined universal DTD (data type definition).
• The input data can came from various sources: static XML file, XML web service, SOAP web service, form input control value on HTML page or any other user defined source. Input format is automatically recognized.
• The changed data can be uploaded to the server without submitting and reloading the page or by submit the page as a part of content of sent form's data
• The methods of upload are: text/plain, text/xml, application/x-www-form-urlencoded, text/xml in SOAP XML format.
• Supported XML web service functions are these, which use HTML form or SOAP XML communication. This function must return string or XML document and accept in parameters string, XML document or any basic type. All ASP.NET, Java SOAP (SAAJ), PHP SOAP web services are supported.

Functions

• Displaying data in rows and columns in treeview with tree and grid or in pure datagrid without tree.
• Displaying and formatting values according to their type (string, boolean, integer, float, enum (select), datetime, html, ...). Possible edit masks.
• Values types and formats are usually set for whole column, but can be set individually for cell. Cells can be set as readonly.
• Editing values based on their type and html form elements�(input, checkbox, select, textarea, ...). For dates is used own calendar control.
• User buttons in cells, prepared user dialog
• Expanding / collapsing rows in tree.
• Controlling by mouse or by keys. Tab key support.
• Copy & paste selected rows to and from grid or any text editor or spreadsheet program like MS Excel. Not in Opera browser.
• Adding and deleting rows.
• Moving and copying rows by mouse dragging (drag and drop operations with rows and groups of rows). Even among more TreeGrids. Controlled by user events.
• Resizing and moving columns.
• Selecting rows and operations with selected groups (moving, copying, deleting, dragging, ...)
• Sorting rows by one or even more columns, string compare - case and localization sensitive or ignore
• Filtering rows according to their values
• Scrolling of parts of content - fixed and variable rows and columns on all sides. Mouse wheel compatible.
• Localization possible. All texts are in external XML file and can be translated to any language. This file also contains language dependent number and date-time formats and constants.

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.

HTML

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>

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>

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

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

Show the example. Show data layout. Show data.

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.

Tree
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.

Documentation

Download

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.

Purchase

Licensing and prices

• Client usage is unlimited and free, the TreeGrid is licensed just for server.
• With the TreeGrid you will get documentation of use the component on web page, programmer's reference, detailed description of data formats, formulas, events and simple API in English language.
• If you purchase the Extended API version, you will get detailed description of all TreeGrid functions and properties.
• I can cooperate with you on your application or I can write whole application with the TreeGrid for you by your specifications. I charge 55 USD per hour. In case of whole commission we can negotiate the price.
• If you need any other universal function or technique to extend the TreeGrid component, I write it (almost) immediately and for free.
• License upgrades are possible, you can upgrade from lower license to upper for the difference between prices. If you upgrade to Extended API you will get new code, of course, compatible with the old.

• "BASIC" Server license for 10 web pages - 600 USD.
  The code of TreeGrid can be used at one server (domain) and can be displayed on up to 10 web pages on this server.
  If you develop your web application just for single usage (at your own server or at server of one your customer).
  Show the license text
• "STANDARD" Developer license for unlimited copies in one web application - 1300 USD.
  The code of TreeGrid can be used as part of one application created by one company. Up to four developers from this company can work with the TreeGrid. No restrictions in distribution of this application.
  Show the license text

• Extended API - 600 USD. Just together with some license. You will get TreeGrid version with all functions visible and documentation for them.
  • By Extended API you can control near all functions of the TreeGrid from JavaScript code.
  • You can find out, what user is doing, what selects, where is the focus, what was moved, added, deleted, changed, ....
  • You can also read and change all the grid/column/row properties adjusted by data.
  • You can add, delete, move and select rows and cells according to events fired elsewhere on the page.
  • You can also override almost all default behavior of the TreeGrid.
  • You can use many helper function for locale support, common support or data communication support.
  • And, of course, many more.
• Source code of the TreeGrid - 2500 USD. Just together with some license.

Support and updates

• The support for the TreeGrid is by email and is for all licenses the same. I usually answer till twelve hours on work day and one day on weekend, depends on time shift. My time zone is +1 GMT (central European). Support email is: [email protected]
• Bug fixes builds are marked with the third number in [1.2.3]. This number is not part of visible version number. Updates, changes and new functions are marked with the second number as minor version.. All these versions are available for free. If you want, I can inform you about any new version by email and/or send you these new versions.
• Major changes are marked with the first number. I estimate it to one new version per year. These versions are available for customers who bought previous version for 1 / 3 price.
• I support all versions I have released, but I suggest you to update to newest minor version, because I guarantee support for the newest minor version only. I guarantee support for a major version for one year after a new major version was released. After that time, you need to upgrade to the new major version, if you need guaranteed support.
• Latest registered version can be downloaded from there.
• For customers, who bought version 2.x is now upgrade to version 3.x for free.

Purchase online

Contact

�

� Jan Kohout, 2004 - 2006