The following top tips for TreeView for ASP.NET will help you when you use the C1TreeView control.
Tip 1: Use the AutoCollapse property to automatically collapse nodes that are not on the path of the currently expanded node.
Setting the AutoCollapse property to True will automatically collapse nodes that are not on the path of the currently expanded node.
Tip 2: Use the AllowTriState property of C1TreeView to enable tri-state checkboxes.
The CheckState property has three values: Checked, UnChecked and Indeterminate. If AllowTriState is set to True and a node of C1Treeview has child nodes, its CheckState is determined by the CheckState of its children. There are three cases which are as follows:
• Case 1: All Checked property of child nodes are set to true, then the parent node’s Checked property would be true and the CheckState is being set to Checked automatically.
• Case 2: Part of childnodes’ Checked property are set to true, then the parent node’s Checked property will be true, but the CheckState property will be Indeterminate.
• Case 3: All childnodes’s Checked properties are set to false, then the parent node’s Checked property will be false, and the Checkstate property will be UnChecked.
Tip 3: Using AllowDragDrop property, OnClientNodeDragStarted and OnClientNodeDropped events to control DragDrop operation.
When the AllowDragDrop property is set to True, the C1TreeViewNode will be allowed to drag and drop.
The sample is for demonstrating the drag-and-drop function of C1TreeView. By using the events, only TreeView2's child node can be dragged and dropped only to TreeView1's 2nd level.
<script type="text/javascript" id="ComponentOneClientScript1">
function C1TreeView2_OnClientNodeDragStarted(sender, eventArgs) {
//to specified which kind of C1TreeViewNode can be drag.
//it can use level of C1TreeViewNode,id,text or etc..
if (eventArgs.get_node().get_level() == 0) {
eventArgs.set_canceled(true);
alert("can't drag root node.");
}
};
</script>
<script type="text/javascript" id="ComponentOneClientScript2">
function C1TreeView1_OnClientNodeDropped(sender, eventArgs) {
//to specified which kind of C1TreeViewNode can be dropped.
var dropped = true;
if (eventArgs.get_desObj().get_owner() == null) {
//treeview.
dropped = false;
}
else {
if (eventArgs.get_desObj().get_level() > 0) {
dropped = false;
}
}
if (!dropped) {
eventArgs.set_canceled(true);
alert("only drop to 2nd level.");
}
};
</script>
<script type="text/javascript" id="ComponentOneClientScript3">
function C1TreeView1_OnClientNodeDragStarted(sender, eventArgs) {
//to cancel the drag event,use this to prevent dragging C1TreeView's node
//and it can add dropped node.
eventArgs.set_canceled(true);
};
</script>
<cc1:C1TreeView ID="C1TreeView1" runat="server" VisualStyle="ArcticFox" AllowDragDrop="true"
VisualStylePath="~/C1WebControls/VisualStyles"
onclientnodedropped="C1TreeView1_OnClientNodeDropped"
onclientnodedragstarted="C1TreeView1_OnClientNodeDragStarted">
<Nodes>
<cc1:C1TreeViewNode runat="server" Checked="False" Expanded="True"
NavigateUrl="javascript:void(0);" NodeIndex="0" Selected="False"
Text="node1.1">
<Nodes>
<cc1:C1TreeViewNode runat="server" Checked="False" Expanded="False"
NavigateUrl="javascript:void(0);" NodeIndex="0" Selected="False"
Text="node1.1.1">
</cc1:C1TreeViewNode>
</Nodes>
</cc1:C1TreeViewNode>
<cc1:C1TreeViewNode runat="server" Checked="False" Expanded="True"
NavigateUrl="javascript:void(0);" NodeIndex="1" Selected="False"
Text="node1.2">
<Nodes>
<cc1:C1TreeViewNode runat="server" Checked="False" Expanded="False"
NavigateUrl="javascript:void(0);" NodeIndex="0" Selected="False"
Text="node1.2.1">
</cc1:C1TreeViewNode>
</Nodes>
</cc1:C1TreeViewNode>
</Nodes>
</cc1:C1TreeView>
<br />
<br />
<cc1:C1TreeView ID="C1TreeView2" runat="server" VisualStyle="ArcticFox"
VisualStylePath="~/C1WebControls/VisualStyles" AllowDragDrop="True"
onclientnodedragstarted="C1TreeView2_OnClientNodeDragStarted">
<Nodes>
<cc1:C1TreeViewNode runat="server" Checked="False" Expanded="True"
NavigateUrl="javascript:void(0);" NodeIndex="0" Selected="False"
Text="node2.1">
<Nodes>
<cc1:C1TreeViewNode runat="server" Checked="False" Expanded="False"
NavigateUrl="javascript:void(0);" NodeIndex="0" Selected="False"
Text="node2.1.1">
</cc1:C1TreeViewNode>
</Nodes>
</cc1:C1TreeViewNode>
<cc1:C1TreeViewNode runat="server" Checked="False" Expanded="True"
NavigateUrl="javascript:void(0);" NodeIndex="1" Selected="False"
Text="node2.2">
<Nodes>
<cc1:C1TreeViewNode runat="server" Checked="False" Expanded="False"
NavigateUrl="javascript:void(0);" NodeIndex="0" Selected="False"
Text="node2.2.1">
</cc1:C1TreeViewNode>
</Nodes>
</cc1:C1TreeViewNode>
</Nodes>
</cc1:C1TreeView>
Tip 4: Improving your application’s page load performance.
To improve your application’s page load performance, set the Expanded property to False.
|
