Wijmo TreeView With SQLDataSource

C1TreeView for Wijmo can be bound to XML Data Source and a SiteMap Data Source easily. You can refer to this link which demonstrates this. More often than not, developers like to work with SQL Database for data storage and want to load C1TreeView from an Sql Database. It's not possible directly but it can be done with a little amount of coding which is explained in this blog.

Getting Data

You can get data from the database using the usual ADO.NET programming technique as shown below :

SqlConnection con = new SqlConnection();  
 con.ConnectionString = ConfigurationManager.ConnectionStrings["C1ConnectionString"].ConnectionString;  
 string cmdText = "SELECT [SessionId], [Session], [Track] FROM [Sessions]";  
 SqlDataAdapter da = new SqlDataAdapter(cmdText, con);  

 DataTable dtSessions = new DataTable();  

 string cmdText1 = "SELECT DISTINCT [Track] FROM [Sessions] Order By [Track]";  
 da = new SqlDataAdapter(cmdText1, con);  
 DataTable dtTracks = new DataTable();  

Populating C1TreeView

Now we can add nodes to C1TreeView depending on which ones you want as Parent nodes and which ones as Child nodes.

C1.Web.Wijmo.Controls.C1TreeView.C1TreeViewNode parentNode;  

 for (int i = 0; i < dtTracks.Rows.Count; i++)  
    parentNode = new C1.Web.Wijmo.Controls.C1TreeView.C1TreeViewNode();  
    parentNode.Text = dtTracks.Rows[i]["Track"].ToString();  

 C1.Web.Wijmo.Controls.C1TreeView.C1TreeViewNode childNode;  

 for (int nodeCount = 0; nodeCount < C1TreeView1.Nodes.Count; nodeCount++)  
    for (int j = 0; j < dtSessions.Rows.Count; j++)  
       if (C1TreeView1.Nodes[nodeCount].Text == dtSessions.Rows[j]["Track"].ToString())  
          childNode = new C1.Web.Wijmo.Controls.C1TreeView.C1TreeViewNode();  
          childNode.Text = dtSessions.Rows[j]["Session"].ToString();  
          childNode.Value = dtSessions.Rows[j]["SessionId"].ToString();  


This article explains how you can populate C1TreeView from Sql DataSource. Refer to the attached sample for complete implementation. Download Sample


GrapeCity Developer Tools
comments powered by Disqus