- Nitobi
- Built for People
Download and integrate our enterprise-class Tree-Grid from our Complete UI suite–into your app. Save yourself time, save your boss's money and look like a genius.
TreeGrid offers all the same features as in our classic DataGrid that matter to developers: Excel copy and paste, in-place cell editing, and live scrolling
Live Demo
Overview
Rich User Experience.
Users can resize columns, copy and paste data with the mouse, navigate with the keyboard, perform in-place editing, and scroll through huge datasets as though they were working with a desktop application.
Minimal Coding Required.
A declarative interface makes customizing the behaviour of your grid quick and easy. Extend the built in features using the JavaScript API.
Unrivaled Performance.
An XML-based Ajax data architecture allows for high-performance rendering of large amounts of data. Allows users to sort, scroll, edit, and save huge datasets with the speed of desktop software.
Cross Platform.
Native support for Java, Classic ASP, and PHP. ASP.NET, Coldfusion.
Hierarchical Data
Displaying hierarchical data allows you to succinctly display database tables that have foreign key relationships. For example, a possible use case is to display Customers from a database and have Orders for those customers render when a row is expanded.
Integrates with Adobe Dreamweaver.
Simply drag and drop Ajax components into sites and applications using Adobe Dreamweaver CS3.
Cross Browser.
Nitobi components have full support for an array of modern browsers including IE6+, Firefox, Mozilla 1.3+, Camino, and Netscape 7+, and Safari 3+.
Features
Ajax Architecture
Using an ultra-concise data transport method, TreeGrid is able to retrieve and save data on-demand with minimal delays, making things like live-scrolling, paging, sorting, and master-detail seamless and fast.
No postbacks are ever required. Grids can be instantiated on-the-fly and data binding can take place whenever it's needed using asynchronous Ajax requests.
Cross-Platform Support
Available with native support for Java, PHP and Classic ASP, Coldfusion, and ASP.NET.
Cross-Browser Support
Native support for an array of modern browsers including Internet Explorer 6.0+, Netscape 7.1+, Mozilla 1.3+, Firefox, Camino, and Safari 3+.
Integrates with Adobe Dreamweaver
Simply drag and drop Ajax components into sites and applications using Dreamweaver CS3.
Three Unique Grid Modes
Three modes providing unique functionality aligning to particular use cases. Automatically predefining a number of subordinate attributes, mode can also be configured by defining its attributes individually.
All modes can be configured in an unbound or bound state (using client-side data or a server-side database).
- LiveScrolling- Scroll through large datasets (thousands or millions of records) in real-time without noticeable performance impacts. Livescrolling is supported in both Static and Databound modes. In Static (or unbound) mode you can provide the Grid a massive XML document, and it will apply the livescrolling technique to improve the runtime performance for the user.
- Paging - For situations where proper pagination is needed, paging mode will explicitly call up pages of predefined sizes like you would find in a standard datagrid. Ajax is still used to do the server communication. This can be applied to both bound and unbound data modes.
- ShowAll - Will retrieve and display the entire recordset without any pagination or livescrolling applied. This is useful for shorter datasets or when other components need access to the entire dataset at once.
Excel Copy and Paste
Use the mouse or keyboard to select a block of cells, and copy and paste between Grid and Excel, or between different grids on different pages. Useful for when users are working offline or need to move between desktop software like Office and the web.
Frozen Columns
Keep important columns visible by locking them in place while scrolling horizontally through the remainder of the visible columns. Useful for very wide tables with many columns of data.
Resizable Columns
Use the mouse to click and drag to resize columns just as you would in a regular datagrid or Excel.
In-place Cell Editing
Click and edit cells directly just as you would in Excel.
Multiple Editor Types
Use built-in editor types like: textbox (types NUMERIC or STRING), checkbox, selectbox (standard html SELECT), image (static and non-editable) or an autocomplete (LOOKUP) such as Nitobi ComboBox.
Static or Databound Modes
Bind the grid to in-page data like an XML document, or feed it data with JavaScript using the API. Bind to databases using the lightning-fast Ajax interface.
Remote Sorting
Sort against massive tables by roundtripping to the server using Ajax calls.
Dockable & Customizable Toolbar
Pull out the toolbar using the mouse as you would on the desktop. Configure the buttons and their attributes using the built-in API.
Linkable Grids
Put multiple grids on a page and easily link them together using the built-in events and JavaScript API. Useful for showing one-to-many relationships (master-detail).
XML-Based Data Architecture
Using a standard MVC model, the Grid contains a concise XML document which it runs against. Feed it new XML from the server or on the client using the JavaScript API, or use our server-side library to avoid working with XML altogether.
Cell Value Masking
Take number and date values and mask them according to your preferences. Display 93323 as 93,323.00, or 09/11/2006 as November 9, 2006 without altering the underlying data.
]Excel-like Keyboard Navigation
Move between cells and pages of data using only the keyboard if preferred. Navigate with the arrow keys or PageUp/PageDown as you would in Excel or other desktop-based datagrids.