Custom Treeview

• Download CustomTreeview.zip - 141.6 KB

Introduction

In this section am going to show how to create a user control, which looks similar to treeview control. It overcomes some of the bottlenecks in treeview control like customizing and positioning of checkbox and with some added feature to set default as any of the node.  It can be helpful, 

• When multilevel hierarchical data need to be displayed and accessed.
• If there different types of notification/access settings grouped into many categories and user can choose out of it.
• It is built with html controls (div, checkbox, radio button), asp data controls (repeater) and Jquery.  

Usage

Prerequisites:  

Place the following files in the folder structure as mentioned below, if you want to place it in different folder structure then do the respective changes in the code.

1. Images:   Images/tree_arrow.gif

         Images/tree_arrow_down.gif

2. Scripts: Scripts/ExtendedTreeView.js
3.  Scripts/Jquery.js
4. Styles: Styles/ ExtendedTreeview.css

Properties that are needs to be set for using this extended tree view control

Mandatory

<ExtendedTreeView1>.Level2Text

Optional

<ExtendedTreeView1>.DefaultValue

Validation Checks: 

 Checks for at least one checkboxes should be selected and a radio button should be selected.

By default it is set to false (No validation).

If the all the items in L2 (e.g., Hierarchy 3.3, Hierarchy 3.4 in Fig 1) is selected then it will return only L1 (e.g., Hierarchy 2.2, Hierarchy 2.3 in Fig 1) value which shows whole value is selected, if not both L1 and L2 values are returned.   

To change the expand collapse image in the control update with same name of existing image but if you wished to change the image name then same name should be updated in the below JS methods too.

ExtendedTreeView.js > ExpandByDefault

ExtendedTreeView.js > ExpandCollapse

Exposed Client Method:

callSaveMethod():  Method used to save and load the selected values to the hidden variable. Then by calling below server side method you can take list of values in a comma separated format.

Exposed Server Method:

GetModifiedList():  This method returns the dictionary with keys

• Level1List
• Level2List
• defaultfirstLevel
• defaultSecondLevel 

which holds the selected item of level 1 and level2 in a comma (,) separated format and the default values.

Note*: After saving the details again bind the saved details to the control to see the saved changes, like rebinding the data table properties.  

History 

• Version 1.0