Tutorial index
There are six tutorials to show using TreeGrid from the simplest empty grid to calculations and other advanced functions.
You can run tutorials locally. If you use IE on Windows XP SP2, you must confirm JavaScript execution on page.
All examples use AJAX data loading from external file, but you can also include such data into HTML file instead.
To simplify data, every example uses only one data file with mixed data and layout content.
Basic tutorial
Basic (empty) grid - The base required XML structure to show TreeGrid
(Variable) rows - How to declare rows and data
Fixed rows - How to declare still visible (result) rows
(Variable) columns - How to declare columns and cell types and formats
Fixed columns - How to declare still visible columns
Tree - How to display data in tree
Settings - How to control TreeGrid settings and parts
Advanced tutorial
Cell types - Choosing type in column or cell
Cell formats - Formatting values in cells
Permissions - How to enable or disable TreeGrid functions like editing or deleting
Sorting rows
Filtering rows
Grouping rows to tree
Default rows - Predefined default values and settings for rows
Default children - Predefined default values and settings for new or moved rows
Calculations tutorial
Calculated columns - Basic calculations
Calculated (result) rows - Aggregate functions
Calculation order - How to set calculating direction
Calculated tree - Aggregate functions for child rows
Calculation order in tree - Advanced calculation order
Editing tutorial
Basic types - Cell types, formats and permissions for editing
Multiline editing - Editing in <textarea>
Editing mask - Predefined structure of input value
Advanced types - Link, image, password, radio, list
Right buttons - Cell button to show editing dialog or menu
Expert tutorial
Cell spanning and merging
User rows and columns - How to include own HTML code into TreeGrid
Header - Multiline captions
Paging - Client and server side paging and child paging
Dragging - Dragging inside grid and among more grids
Resizing grid and relative height and width
Master / detail tables
Master / detail trees
Rows identification tutorial - How to identify changed rows on server side
Setting row id attribute
Setting characters to generate new ids from
Using one editable column as unique id
Using one editable column as unique id in tree
Using more (editable) columns as unique id
Custom id generating on server or by API