Set additional properties for the node. Set the PopulateOnDemand property to true so that the child nodes can be This will make querying for items in a specific category easier when Notice that the CategoryId is stored in the Value property Notice that the query results are stored in the table of the DataSet.įoreach (DataRow row in ) Iterate through and create a new node for each row in the query results. These are the valuesĭataSet ResultSet = RunQuery("Select CategoryID, CategoryName From Categories") Call the appropriate method to populate a node at a particular level. Void PopulateNode(Object sender, TreeNodeEventArgs e) When client-side node population is enabled, nodes are populated dynamically on the client, without the need to post back to the server. The following code example demonstrates how to populate the nodes in the TreeView control from the client. The following code example provides sample site map data for the preceding code example. For this example to work correctly, you must copy the sample site map data, provided after this code example, to a file named Web.sitemap. The following code example demonstrates how to use the TreeView control for site navigation by binding it to a SiteMapDataSource control. The following code example provides sample XML data for the preceding example. For this example to work correctly, you must copy the sample XML data, provided after this code example, to a file named Book.xml. The following code example demonstrates how to bind the TreeView control to an XML data source. This example is used within the frame set of the preceding example to display a table of contents. The following code example demonstrates how to use declarative syntax to display static data in the TreeView control. The following code example demonstrates how to set up the frames for the following code example. The seventh code example demonstrates how to populate the nodes in the TreeView control from the client. The sixth code example provides sample site map data for the fifth code example. The fifth code example demonstrates how to use the TreeView control for site navigation by binding it to a SiteMapDataSource control. The fourth code example provides sample XML data for the third code example. The third code example demonstrates how to bind the TreeView control to an XML data source. The second code example demonstrates how to use declarative syntax to display static data in the TreeView control. The first code example demonstrates how to set up the frames for the second code example. This section contains seven code examples: In your Razor HTML-view, the base for the TreeView control is a simple tag, with an data-url attribute pointing at the method it should call to get data: Īnd finally some javascript/jquery to initialize the TreeView and add some handling, this code loads the treeview, sets the icons I would like to have (from font-awesome) and adds a click-handler which just writes out the selected node name to the console.ICallbackEventHandler IPostBackDataHandler IPostBackEventHandler Examples Return Json(list, JsonRequestBehavior.AllowGet) Var items = Directory.GetFileSystemEntries(node) List.Add(new Node(Path.GetFileName(item), item, Directory.Exists(item))) Var items = Directory.GetFileSystemEntries("D:/") If it’s a folder I’m passing “true” to the load_on_demand property of the jqTree javascript model: public ActionResult Nodes(string node) This is some simple test-code using the local computer folder structure on the D-drive just to try it out. My action is called /Home/Nodes and takes and optional “node” parameter which holds the id of the treeview-node being “expanded”. Then create a controller method in HomeController.cs which will be called on-demand/lazily by the TreeView control in your HTML-view. Public Node(string label, string id, bool loadOnDemand = true) Then open up your /App_Start/BundlesConfig.cs file and add the files to your bundles, something like this:īundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(īundles.Add(new StyleBundle("~/Content/css").Include(Īdd this viewmodel to hold the treeview node data: public class Node The package is not available on Nuget at the moment though, but it’s easy enough to download and set up manually.ĭownload and unzip the code from Github, copy the files jqtree.css and jqtree-circle.png to your /Content folder, and copy the file to your /Scripts folder. The code is available on and the author mbraak (Marco Braak) is very active in the “issues” section answering questions from users. I’ve been looking for a lightweight TreeView library to use with ASP.NET MVC, and I think I’ve found my “weapon of choice” – jqTree.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |