TreeGrid Gantt Chart is TreeGrid extension to display charts for project and service management or for any other purposes.

The data can come from many data sources: static XML file, static JS file (JSON format), 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.

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 6.0+ and all IE engine shells
    Mozilla Firefox 1.5+ and all other Gecko engine shells
    Opera 9.0+
    Google Chrome 3.0+ and Safari 3.0+ and all other WebKit engine shells
    iPad Safari Mobile 1.0+
    Android Android browser 3.0+
• 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. Also paging in columns and tree.
• 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, including dynamic span by mouse dragging.
• 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, export to PDF, including various PDF options
• 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.
• 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).
• Supported is also JSON format in string or JavaScript.
• 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.

TreeGrid Live examples

Paging with grouping, sorting, filtering, export and calculations

This example shows various TreeGrid features with server paging on table with 2,000, 10,000 and 50,000 rows.
This example does not use any custom JavaScript or special server script code, all features are set via XML data definitions and provided by TreeGrid!

Large table without paging

TreeGrid is fast and can display large tables without any delayed rendering in reasonable times. This example displays 1,000 rows and 14 columns. All rows and columns are rendered on start and are shown immediatelly.
Of course, using paging is much faster, you can choose Client paging and compare rendering times with the grid without paging. You can test features like sorting, filtering, grouping, column hiding / showing, column moving, print, export and so on, in such large table. In bottom debug window you can see the times spent by provided actions.

Interactive Gantt chart

A demonstration of TreeGrid application showing interactive Gantt chart - timetable of tasks and their completion in project management.

Interactive Run chart example

This example demonstrates Continuous Run, complex and universal bar type in Gantt chart. It supports more bars in one cell, with different features, size, color, class, text and tooltip.

• New box can be added by dragging it from the right grid or by dragging empty space in the left grid.
• Box can be resized by dragging its edge. Fixed or solid box by dragging the edge with Ctrl.
• Box can be moved inside the cell by mouse dragging. Box can be moved outside the cell by dragging with Ctrl.
• Dragging box to the edge of other box joins the boxes, the boxes are moved together. The boxes can be separated by dragging one box with Shift.
• When dragging box with Shift, the box can be placed everywhere, even to incorrect position.
• Box can be deleted by resizing it to empty width or from popup menu.
  The box type, color, text and tooltip can be changed from popup menu (right click).
• Chart can be zoomed by selecting date range by mouse draging or clicking to one date in Gantt header, unzoomed by right click Gantt header.
  In this example are excluded weekends as holidays, except the weekend 24~25th May. The weekends are excluded from the run lengths, the runs cannot start or end in weekend.
• All these control settings can be changed in XML.