Services
Support
Store
©2015 Intersoft Solutions. All rights reserved.
Intersoft Support Center

Customize Expand and Collapse

By default, when you select a node in WebTreeView, the node will be expanded. However, you can also set WebTreeView to collapse when the expanded node is selected.

The default value of AllowExpandNodeOnSelect is True and AllowCollapseNodeOnSelect is False.

In this topic, you will learn how to customize expand and collapse.

To expand and collapse by selecting the nodes.

  1. Bind WebTreeView to XMLDataSource.
  2. Set WebTreeView's properties >> AllowCollapseNodeOnSelect to True.
  3. If both properties are set to False, simply double clicking the node to expand and collapse.

To expand and collapse the selected node

  1. Bind WebTreeView to XMLDataSource.
  2. Drag 2 HTML buttons to the WebForm.
  3. Button1 will perform expanding selected node with Expand() method.
  4. Button2 will perform collapsing selected node with Collapse() method.

    JavaScript Copy ImageCopy Code 
    // Add this code to Expand selected node's button
function Button1_onclick()
{   
   var tv = ISGetObject("WebTreeView1");   
   if (tv.GetSelectedNode()!=null)   
   {       
      tv.GetSelectedNode().Expand();   
   }   
   else       
      alert("Please select a node first !");}   

// Add this code to Collapse selected node's button
function Button2_onclick()
{   
   var tv = ISGetObject("WebTreeView1");   
   if (tv.GetSelectedNode()!=null)   
   {       
      tv.GetSelectedNode().Collapse();   
   }   
   else       
      alert("Please select a node first !");
}

  5. Run the application and try to click each button to see the result. For more information, please refer to Expand and Collapse Node sample in LiveSamples >> WebTreeView >> Expand Collapse Behaviors.


To toggle expand collapse of the selected node

  1. Bind WebTreeView to XMLDataSource.
  2. Drag a HTML button to the WebForm.
  3. The button will perform toggle expand collapse of the selected node with ToggleExpandCollapse() method.

    JavaScript Copy ImageCopy Code 
    // Add this code to Toggle expand collapse selected node's button
function Button1_onclick()
{   
   var tv = ISGetObject("WebTreeView1");    
   if (tv.GetSelectedNode()!=null)   
   {       
      tv.GetSelectedNode().ToggleExpandCollapse();   
   }   
   else       
      alert("Please select a node first !");
}

  4. Run the application and try to click each button to see the result. For more information, please refer to Expand and Collapse Node sample in LiveSamples >> WebTreeView >> Expand Collapse Behaviors.

To expand and collapse all nodes

  1. Bind WebTreeView to XMLDataSource.
  2. Drag 2 HTML buttons to the WebForm.
  3. Button1 will perform expanding all nodes with ExpandAll() method.
  4. Button2 will perform collapsing nodes with CollapseAll() method.

    JavaScript Copy ImageCopy Code 
    // Add this code to Expand all nodes's button
function Button1_onclick()
{   
   var tv = ISGetObject("WebTreeView1");        
   tv.ExpandAll();
}

// Add this code to Collapse all nodes's button
function Button2_onclick()
{   
   var tv = ISGetObject("WebTreeView1");        
   tv.CollapseAll();
}

  5. Run the application and try to click each button to see the result. For more information, please refer to Expand and Collapse Node sample in LiveSamples >> WebTreeView >> Expand Collapse Behaviors.
Previous Next