Back to TreeGrid home

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. This DLL is just helper library and you don't need to use it, if you want to support server paging by your own script.


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 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 these 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+
Gecko engine (Mozilla 1.0+, Mozilla Firefox 1.0+, Netscape Navigator 6.0+, Camino 1.0+, K-Meleon 1.0+)
Opera 7.60+
KHTML engine (Google Chrome beta, Konqueror 3.0+, Safari 1.2+)
Supports all CSS1 compatibility modes: strict mode, almost strict mode, quirks mode. All <!DOCTYPE> tag settings are supported.
TreeGrid can handle up to about 20 000 rows offline and up to millions rows online using paging and AJAX.
Various types of paging with sorting, filtering and calculations for all pages.
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.
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, ...).
Cell spanning and merging.
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.
Grouping rows to tree according to same values in column(s). Similar to summarizations in Pivot table in MS Excel.
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. Date and number ranges filters (between clause).
Advanced filters by any expression or formula, with possibility to define predefined filters.
Searching like by Google.
Export to Microsoft Excel or any other spreadsheet program that can handle XLS files or data in HTML tables. Include number and date formats.
Printing capabilities
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.
Variable row height according to cell content, height changing when editing in text area.
Gantt chart creating, including dependencies and dynamic updating.
displaying and dynamic updating of external objects like Adobe Flash, Microsoft SilverLight or custom JavaScript objects
Many examples and predefined code for server side scripts ASP (VBScript), ASP.NET (C#, Visual Basic), JSP (Java) and PHP.
Detailed documentation of TreeGrid usage, events, data format, JavaScript API and cell formulas.
  
 
 

Data communication

The input/output data format is 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 generated by web page, 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 (AJAX) 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 those, 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.
Synchronization with server - TreeGrid can automatically check and download all changes from server done by other users or applications.
  
 
 

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), radio, datetime, html, img, url ...). Possible edit masks given by any regular expression.
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. Fully customizable mouse and key schemas.
Copy & paste selected cells 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 API events.
Resizing and moving columns.
Selecting rows and operations with selected groups (moving, copying, deleting, dragging, ...).
Selecting rows or cell range by mouse and operations with selected range (copying, pasting, custom actions, ...).
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.