Add or Remove Nodes of UltraWebTree Using JavaScript

The following JavaScript function adds a new node to the WebTree, as a child of the selected node. It will be called by the onclick event of an HTML button.

In java Script

function AddChild()
{
var tree = igtree_getTreeById("UltraWebTree1");
var node = tree.getSelectedNode();
var newnode;

if (node)
{
newnode = node.addChild("Added Node");
newnode.setTag("'AddedNode' Tag");
}
}

The following JavaScript function removes the last child node of the selected node from the WebTree. It will be called by the onclick event of another HTML button.

In JavaScript:

function RemoveChild()
{
var tree = igtree_getTreeById("UltraWebTree1");
var node = tree.getSelectedNode();

if (node)
{
var cnodes = node.getChildNodes();

if (cnodes.length == 0)
return;

var cnode = cnodes[cnodes.length - 1];
cnode.remove();
}
}

Bind UltraWebTree to XML That Has Been Dynamically Derived from a DataSet

Following code is C#.
Load the data into the DataSet.
customersAdapter.Fill(dataSet1, "Customers");
ordersAdapter.Fill(dataSet1, "Orders");
orderDetailsAdapter.Fill(dataSet1, "Order Details");

Set the Nested property of the relations to true so that the XML is generated.

// nests the orderdetails within the orders within customers.
// Set the property to false to have the Customers, Orders, OrderDetail records
// displayed consecutively within the tree, (Non-hierarchically).
dataSet1.Relations["CustOrders"].Nested = true;
dataSet1.Relations["OrderDetails"].Nested = true;

Create an in-memory stream in which to point the dataset output and place the XML into the xmlWriter;

System.IO.MemoryStream stream = new System.IO.MemoryStream();
System.Xml.XmlWriter xmlWriter = new System.Xml.XmlTextWriter(stream, m.Text.Encoding.UTF8);
// Shoot the xml into the xmlWriter stream and reset the underlying stream to the beginning
dataSet1.WriteXml(xmlWriter, XmlWriteMode.IgnoreSchema);
stream.Seek(0, System.IO.SeekOrigin.Begin);

Now you would have to obtain the Customers.xsl file from the application directory and load it the XslTransform. The XSL file contains the rules for the transformation from the DataSet XML to the // UltraWebTree XML format.

System.Xml.Xsl.XslTransform xslTransform = new System.Xml.Xsl.XslTransform();
xslTransform.Load(Server.MapPath("Customers.xsl"));

Now load the memory stream into an XPathDocument object so that it can be navigated by the XslTransform.

System.Xml.XPath.XPathDocument xpathDoc = new System.Xml.XPath.XPathDocument(stream);

Perform the transformation from the DataSet XML format to the UltraWebTree XMLformat.

XmlReader xmlReader = xslTransform.Transform(xpathDoc, null);

Create an Xml Document and load it from the transform result and load the XML document into the UltraWebTree

System.Xml.XmlDocument xmlDoc = new System.Xml.XmlDocument();
xmlDoc.Load(xmlReader);
UltraWebTree1.ReadXmlDoc(xmlDoc, true, true);

XML structure for a UltraWebNavigator UltraWebTree Node

What is shown below is a non-normative representation of the XML structure. Developers should inspect the XML generated by the WriteXml method(s) of UltraWebTree after customizing any properties necessary on the UltraWebTree, to identify that structure of those specific properties required by their web applications.

The XML structure described here may continuously evolve with changes in the UltraWebNavigator. In particular, new elements may be added to this schema to support future features. As a consequence, developers using this information are encouraged to use it in a robust and decoupled manner. Certain programming practices may create hard dependencies that are vulnerable to such breakage and should be avoided.

For instance, always depending on a element having a preceding sibling node named is subject to breakage if a new element in inserted between these two. A better (and more robust) programming practice is to use XPath to look specifically for //Node/Url elements.


-
-
myText
myCssClass
myIslandClass
myHoverClass
myTargetUrl
myTargetFrame
1
true
myImage
-
myTag
myHiliteClass
mySelectedImage
true
true
-
3px
1px
2px
0px

-
7px
5px
6px
4px

-
-
Child #1

-
Child #2

select multiple nodes in an UltraWebTree

On the client side, an array will be used to maintain a list of nodes that will be considered selected. In this example, a node is considered selected if its Tag property is equal to "Selected". The Tag property was chosen in this case because changes to the Tag property made on the client side will persist to the server. The default selected style is removed so that a consistent node style can be applied in the javascript. In this example, selected nodes will have their text color changed to blue. The code displayed below can be found in the samples in this article.

Step-By-Step Example

1. Place an UltraWebTree onto the web form.
2. In the Page_Load event, add some nodes to the tree and set the SelectedNodeStyle color properties of the tree to Transparent.


if(!Page.IsPostBack)
{
for(int i = 0; i < 5; i++)
{
Infragistics.WebUI.UltraWebNavigator.Node topLevel =
new Infragistics.WebUI.UltraWebNavigator.Node();
topLevel.Text = "Root " + i.ToString();
for(int j = 0; j < 5; j++)
{
Infragistics.WebUI.UltraWebNavigator.Node subLevel =
new Infragistics.WebUI.UltraWebNavigator.Node();
subLevel.Text = "Child " + i.ToString() + " " + j.ToString();
topLevel.Nodes.Add(subLevel);
}
UltraWebTree1.Nodes.Add(topLevel);
}
//Since the javascript handles the SelectedNodeStyle look
//these can be set to Transparent
UltraWebTree1.SelectedNodeStyle.BackColor = Color.Transparent;
UltraWebTree1.SelectedNodeStyle.ForeColor = Color.Transparent;
}

Have a parent node select all child nodes in WebTree

1. Handle the UltraWebTree.ClientSideEvents.NodeChecked event.
2. In this event, iterate through the selectedNode.getChildNodes array and select all child nodes.

Here is the JavaScript function to perform all this. Since the NodeChecked event is fired every time you call node.setChecked(), this event will fire recursively and take care of the whole hierarchy for you.

function UltraWebTree1_NodeChecked(treeId, nodeId, bChecked)
{
var selectedNode = igtree_getNodeById(nodeId);
var childNodes = selectedNode.getChildNodes();

if (bChecked)
{
for (n in childNodes)
{
childNodes[n].setChecked(true);
}
}
}

Programmatically add nodes to a WebTree and items to a WebMenu

1. Add a WebTree and WebMenu to the webpage. Give the WebTree an ID of treeAddCollections and the WebMenu an ID of menuAddCollections.
2. Create variables that will be used to create the nodes and items. The Node and Item classes are found in the Infragistics.WebUI.UltraWebNavigator namespace.

Node rootNode;
Node childNode;
Item topItem;
Item subItem;


// Create 5 root nodes with 5 child nodes each.
// By adding to an individual node's Nodes collection, you
// can create more levels to the tree
for (int i = 0; i < 5; i++)
{
rootNode = new Node();
rootNode.Text = "Root Node " + i.ToString();

for (int j = 0; j < 5; j++)
{
childNode = new Node();
childNode.Text = "Child node " + i.ToString() + " " + j.ToString();
rootNode.Nodes.Add(childNode);
}

treeAddCollections.Nodes.Add(rootNode);
}

// Create 5 top level items with 5 subitems each.
// By adding to an individual item's Items collection, you
// can create more levels to the menu
for (int l = 0; l < 5; l++)
{
topItem = new Item();
topItem.Text = "Top Item " + l.ToString();

for (int m = 0; m < 5; m++)
{
subItem = new Item();
subItem.Text = "Sub Item " + l.ToString() + " " + m.ToString();
topItem.Items.Add(subItem);
}

menuAddCollections.Items.Add(topItem);
}