Please read the following functional doc to estimate the effort. The suggested xTree (JavaScript) implementation is just a suggestion.
XTree API (WebFX) [login to view URL]
I need code that implements a grid with expand/collapse tree structure. Elements (columns) of the grid include check boxes, buttons, labels, and text fields.
The grid should contain columns with the following widgets:
Check Box
xTree
Label 1
Label 2
Text Filed 1
Text Field 2
An example of the second column (xTree) would be:
Node 1
- Node 1.1
Node 1.1.1
Node 1.1.2
+ Node 1.2
A popup window should contain Title, Save and Close button, and an arbitrary number of lines containing these two columns:
Check Box
Label
Click on Demo in [login to view URL] to see the Tree structure expand/collapse behavior
Grid Functionality:
1. When a node collapses, all children rows of the grid become invisible
2. Changes in text fields and check boxes are not affected by expand/collapse actions
3. Clicking on a button produces a popup window with multiple check box label pairs. Number and Selection of labels is unique for each button. Clicking on the button again brings up the window with previously checked boxes.
4. Submitting the page with the grid will forward to the next page (Page 2) that contains only checked rows from the previous grid and the corresponding column values. In case of multiple selections from popup windows, the values are separated with a comma in the column
5. Page 2 has an extra column with editable text field.