This sample demonstrates how you can dynamically add, modify and delete the WebObjectTree children items using client-side JavaScript.
The tree structure for this sample is sent to the client using the following WebObjectTree property:
WebObjectTree.CustomData = "{\"rootNode\":{\"innerKey\":\"ID0\",\"innerText\":\"Root\",\"firstChild\":{...}}}";
This property allows custom-defined data to be transmitted to the client along with the WebObjectTree control.
This is case, the tree structure is described in JSON format to simplify usage in the web browser, but any string format can be used.
This JSON string is returned for the specified WebObjectTree instance using the following client-side method:
function cwotGetCustomData(controlId)
This string is deserialized into JavaScript objects, and the WebObjectTree JavaScript callback method is used to populate the visual tree.
When an item is selected and the F2 key is pressed or double-clicked, direct editing is enabled by returning
true from the following client-side event:
function cwotOnAllowRename(controlId, renamePath)
When the user has completed editing the current item, the following client-side event handles the actual renaming:
function cwotOnRenameItem(controlId, renamePath, newValue)
Additionally, the "Modify Node" button programmatically renames the current item from the text box field using the following client-side method:
function cwotRenameItem(controlId, renamePath, newValue)
All the other modification buttons allow you to make changes to the underlying structure.
WebObjectTree is refreshed by removing the modified children by passing in their path to the following client-side method:
function cwotClearChildren(controlId, clearPath)
Following this, the
cwotSetFullPath client-side method is used to select a new child and re-fetch the affected portion of the tree.
To persist the modified tree structure, the JavaScript objects are serialized back into a JSON string.
This string is stored and included with any possible postbacks using the following client-side method:
function cwotSetCustomData(controlId, customData)
Clicking the "Submit" button will display the full path for your selection and the number of visible nodes in the tree below:
Click the "Reset" link to clear your selection and restore the tree to its default structure.