Editable JavaScript TreeGrid

Tutorial index

There are seven tutorial pages 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 (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

Space rows - How to declare still visible (control) 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 Default rows - Predefined default values and settings for rows Default children - Predefined default values and settings for new or moved rows

	Features tutorial Sorting rows Filtering rows Grouping rows to tree Search and advanced filtering

	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 Maximizing or resizing grid and relative height and width Master / detail tables Master / detail trees Special rows done by Space rows

	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