Bind Tree View Control on Modal Pop-Up

In this blog, I am explaining how to place a tree view control and bind it from the database and also how to retrieve the values you selected.

Step 1: Here I am using the “ModalPopupExtender” to create a pop-up, for this you need to download “AjaxControlToolkit.dll” from the internet and copy this file into your project.

Register the AjaxControlToolkit assembly to use it.

<%@RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1"%>

Step 2: In order to use this control first we need to add the Script Manager control, it is available under the category of AJAXEXTENSIONS in the toolbox.

<asp: ScriptManagerID="ScriptManager1"runat="server">
</asp: ScriptManager>

Step 3: ModalPopupExtender have two major attributes that we need to provide for it, those are:

1. TargetControlID="" (The id of a control to appear the pop-up )
2. CancelControlID="" (The id of a control to close the pop-up)
3. PopupControlID="" (The id of the panel to appear on the pop-up)

Step 4: Now create a panel to place on the pop-up.

Step 5: Add a tree view control in the panel.

Step 6: Here I am providing the database scripts that is used to bind to the tree view.

Step 7: In Code you have to save your connection string in order to connect with SQL.

SqlConnection cn = newSqlConnection ("Data Source=.; Initial Catalog=CL;Integrated Security=True");

Provide your database name at : Initial Catalog=”Database name”.

Namespaces:

using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.IO;