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.


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.
  
 
 

Gantt chart

Usable especially for project management - planning and scheduling tasks
It can be used as core of applications providing features of Microsoft Project or Primavera online on web
Tasks set by duration or end date or both (mirrored), with percentage of completion
Milestones with 0 duration
TreeGrid Gantt Chart is project management tool to build gantt charts online on web
Resources for tasks, possible filtering rows by resources
Resource usage and availability charts. Resource types like work or material.
Discrete bars for real flow - actual completion of the task, usable along the task bars.
Flags - any custom icons shown on exact date with defined tooltip
TreeGrid Gantt Chart provides all basic features for project management like Primavera or Microsoft Project
Dependencies between tasks as descendants (successors) or ancestor (predecessors) or both (mirrored)
Dependency types end-start (fs), end-end (ff), start-start (ss), start-end (sf)
Possible more dependencies between two tasks (ss + ff)
TreeGrid Gantt Chart is online replacement of project planning and scheduling software like Microsoft Project or Oracle Primavera
Dependency lags in any time units like hours, days or elapsed days
Dependency constraints define available span between dependency start+lag and end
Checking circular dependencies
Automatic correcting dependencies after task move or resize or dependency change, moving the dependent tasks
TreeGrid Gantt Chart is core for project charter to create project schedules and plans
Possible correcting dependencies only on demand, showing the incorrect dependencies in red
Automatic checking all entered inputs and changes in chart if they are correct
Excluded holidays - any defined dates, date ranges or repeated dates
The holidays are excluded from Gantt calculations and can be also hidden from the chart
TreeGrid Gantt Chart can be used for various project plans or schedules with Gantt chart
Project baseline date constraint, tasks cannot be moved before or the first tasks are forced to start on
Critical path management - critical tasks with specified slack can be highlighted or filtered
Task date constraints for early start date, early finish date, late start date, late finish date
All the date constraints are shown in Gantt chart as icons and be added, deleted and moved directly in the chart
Highlighted custom dates or date ranges in background or foreground
Fully customizable Gantt headers, defining any date formats in one or more header lines
TreeGrid Gantt Chart can do also specialties like engineering project management systems online on web
The Gantt chart is fully interactive, all items can be changed directly in the chart by mouse
The Gantt behavior is fully customizable by defining key and mouse action schema
TreeGrid Gantt Chart can be used for various task management, project templates or process management softwares
Gantt popup menu (customizable) with all available features accessible from the menu on right click
Smooth zoom to date range selected by mouse dragging in header or by click to exact date in header
Custom zoom levels with different dates and formats in header, size constraints and backgrounds
Custom CSS styles, every cell can display completely different bars (shapes and colors).
TreeGrid Gantt Chart can be used also for online web tasks like time management, IT project management or online project management
API events and methods to extend the Gantt features by custom JavaScript
RTL version for Middle East languages plus Hirji dates and calendar
  
 
 

Run chart

Usable especially for services or resources management
More independent bars in one cell
Every bar can have its own type, width, caption, color, class and tooltip
Various types of bars with different features, like normal, empty, not movable, not resizable, start/end, ...
All the bar setting can be changed by a user from popup menu or another custom way
The bars can overlap each other, in this case they can be marked as error with different color and class
The bars can be defined independently by their start dates and width or end date
Or the bars can be defined by one start date and bar widths
The bars are fully interactive, can be created, resized, moved and deleted by mouse dragging
Many possibilities of moving behavior, the bars can be shifted or resized to create room for the new bar
Bars can be moved between rows or between grids or can be dropped to any other custom place
Joined bars, moving the joined bars together, possible splitting and joining bars by dragging
API events and methods to extend the Gantt features by custom JavaScript
Other Gantt features like header, zoom, dependencies or resources can be also used with Run bars
Other Gantt objects like flags, flow, tasks or milestones can be also shown along Run bars with one cell