Tree Table
Ajax data loading
Ajax sorting & filtering
Static and dynamic structure
Configurable preloaded nodes
Single and multiple selection
Column resizing
Dynamic columns
Multiple headers and footers
Merging row cells
Individual rows and cells customization
Keyboard navigation

Components

Calendar
Chart
Confirmation
Data Table
Date Chooser
Drop Down Field
Dynamic Image
Folding Panel
Graphic Text
Hint Label
Popup Layer
Suggestion Field
Tab Set
Tabbed Pane
Tree Table
Two List Selection
Validation
Basic FeaturesSelection & KeyboardRows & Cells CustomizationPreloading Nodes 
This page demonstrates the following features:
  • Multiple node selection - click any row to select it and use the keyboard to change selection. Use Ctrl-click or Shift-Up, Shift-Down key combinations to make multiple selection.
  • Keyboard navigation - Use the Up, Down, Home, End keys to move selection, and Right/Left or +/- keys to expand/collapse the selected node.
  • Embedding components - Double-click the icons for a particular request to switch to edit mode.
  • Conditional styling - The rows displaying compound requests are bold.
  • Reordering columns - Click the Customize Columns button to add/remove columns or change their order.
  • Refreshing a TreeTable with Ajax - All of the request manipulation actions below are performed with Ajax.
  • Sorting with Ajax technology - Click the column header to sort the data without refreshing the entire page.
  • Customizing default node expansion state - All nodes are expanded by default when the TreeTable component is loaded.
  • Standard HTML events support - The onkeydown event is used to support the shortcuts for manipulating requests.
IDDescriptionWork (days)PriorityStatusAssignee
NO-1
Some task 1
2.0NormalCompletedWorker 1
NO-2
Some task 2
3.0NormalCompletedWorker 1
NO-3
Some task 3
2.5MajorCompletedWorker 1
NO-9
A serious undertaking
4.5In progress 
NO-4
Feature 1
1.0NormalCompletedWorker 1
NO-5
Feature 2
1.0NormalPendingWorker 1
NO-8
Complex task
2.5In progress 
NO-6
Sub-task 1
1.0NormalIn progressWorker 2
NO-7
Sub-task 2
1.5NormalPendingWorker 2
NO-12
Solve problem 1
1.0In progress 
NO-10
Sub-problem 1
0.5NormalPendingWorker 1
NO-11
Sub-problem 2
0.5MajorCompletedWorker 2
NO-13
Solve problem 2
1.0MinorPendingWorker 3
Add request Add sub-request Edit request Delete request(s)
Click on the TreeTable above or use the Tab key to focus it so that the keyboard shortcuts become enabled.