Your search did not match any results.
TreeView

TreeView with Search Bar

Documentation

This demo demonstrates the TreeView widget’s searching capabilities. The widget can find nodes containing your search string or only starting with it depending on the search mode.

@(Html.DevExtreme().TreeView() .ID("treeview") .DataSource(d => d.Mvc().LoadAction("GetHierarchicalDataForSearch")) .DisplayExpr("Text") .ItemsExpr("Items") .ExpandedExpr("Expanded") .Width(500) .SearchEnabled(true) ) <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Search mode</span> @(Html.DevExtreme().SelectBox() .ID("searchMode") .DataSource(new string[] { "contains", "startsWith" }) .Value("contains") .OnValueChanged("selectBox_valueChanged") ) </div> </div> <script> function selectBox_valueChanged(e) { $("#treeview").dxTreeView("option", "searchMode", e.value); } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Controllers { public class TreeViewController : Controller { public ActionResult TreeViewWithSearchBar() { return View(); } [HttpGet] public ActionResult GetHierarchicalDataForSearch(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(TreeViewHierarchicalDataForSearch.Products, loadOptions)), "application/json"); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class Product { public string ID { get; set; } public string CategoryId { get; set; } public string Text { get; set; } public bool Expanded { get; set; } public List<Product> Items { get; set; } public int Price { get; set; } public string Image { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public static class TreeViewHierarchicalData { public static Product SuperMartOfTheWest = new Product { Text = "Super Mart of the West", Expanded = true, Items = new List<Product> { new Product { Text = "Video Players", Items = new List<Product> { new Product { Text = "HD Video Player", Price = 220, Image = "../../images/ProductsLarge/1.png" }, new Product { Text = "SuperHD Video Player", Price = 270, Image = "../../images/ProductsLarge/2.png" } } }, new Product { Text = "Televisions", Expanded = true, Items = new List<Product> { new Product { Text = "SuperLCD 42", Price = 1200, Image = "../../images/ProductsLarge/7.png" }, new Product { Text = "SuperLED 42", Price = 1450, Image = "../../images/ProductsLarge/5.png" }, new Product { Text = "SuperLED 50", Price = 1600, Image = "../../images/ProductsLarge/4.png" }, new Product { Text = "SuperLCD 55", Price = 1350, Image = "../../images/ProductsLarge/6.png" }, new Product { Text = "SuperLCD 70", Price = 4000, Image = "../../images/ProductsLarge/9.png" } } }, new Product { Text = "Monitors", Expanded = true, Items = new List<Product> { new Product { Text = "19\"", Expanded = true, Items = new List<Product> { new Product { Text = "DesktopLCD 19", Price = 160, Image = "../../images/ProductsLarge/10.png" } } }, new Product { Text = "21\"", Items = new List<Product> { new Product { Text = "DesktopLCD 21", Price = 170, Image = "../../images/ProductsLarge/12.png" }, new Product { Text = "DesktopLED 21", Price = 175, Image = "../../images/ProductsLarge/13.png" } } } } }, new Product { Text = "Projectors", Items = new List<Product> { new Product { Text = "Projector Plus", Price = 550, Image = "../../images/ProductsLarge/14.png" }, new Product { Text = "Projector PlusHD", Price = 750, Image = "../../images/ProductsLarge/15.png" } } } } }; public static Product Braeburn = new Product { Text = "Braeburn", Items = new List<Product> { new Product { Text = "Video Players", Items = new List<Product> { new Product { Text = "HD Video Player", Price = 240, Image = "../../images/ProductsLarge/1.png" }, new Product { Text = "SuperHD Video Player", Price = 300, Image = "../../images/ProductsLarge/2.png" } } }, new Product { Text = "Televisions", Items = new List<Product> { new Product { Text = "SuperPlasma 50", Price = 1800, Image = "../../images/ProductsLarge/3.png" }, new Product { Text = "SuperPlasma 65", Price = 3500, Image = "../../images/ProductsLarge/8.png" } } }, new Product { Text = "Monitors", Items = new List<Product> { new Product { Text = "19\"", Items = new List<Product> { new Product { Text = "DesktopLCD 19", Price = 170, Image = "../../images/ProductsLarge/10.png" } } }, new Product { Text = "21\"", Items = new List<Product> { new Product { Text = "DesktopLCD 21", Price = 180, Image = "../../images/ProductsLarge/12.png" }, new Product { Text = "DesktopLED 21", Price = 190, Image = "../../images/ProductsLarge/13.png" } } } } } } }; public static Product EMart = new Product { Text = "E-Mart", Items = new List<Product> { new Product { Text = "Video Players", Items = new List<Product> { new Product { Text = "HD Video Player", Price = 220, Image = "../../images/ProductsLarge/1.png" }, new Product { Text = "SuperHD Video Player", Price = 275, Image = "../../images/ProductsLarge/2.png" } } }, new Product { Text = "Monitors", Items = new List<Product> { new Product { Text = "19\"", Items = new List<Product> { new Product { Text = "DesktopLCD 19", Price = 165, Image = "../../images/ProductsLarge/10.png" } } }, new Product { Text = "21\"", Items = new List<Product> { new Product { Text = "DesktopLCD 21", Price = 175, Image = "../../images/ProductsLarge/12.png" } } } } } } }; public static Product Walters = new Product { Text = "Walters", Items = new List<Product> { new Product { Text = "Video Players", Items = new List<Product> { new Product { Text = "HD Video Player", Price = 210, Image = "../../images/ProductsLarge/1.png" }, new Product { Text = "SuperHD Video Player", Price = 250, Image = "../../images/ProductsLarge/2.png" } } }, new Product { Text = "Televisions", Items = new List<Product> { new Product { Text = "SuperLCD 42", Price = 1100, Image = "../../images/ProductsLarge/7.png" }, new Product { Text = "SuperLED 42", Price = 1400, Image = "../../images/ProductsLarge/5.png" }, new Product { Text = "SuperLED 50", Price = 1500, Image = "../../images/ProductsLarge/4.png" }, new Product { Text = "SuperLCD 55", Price = 1300, Image = "../../images/ProductsLarge/6.png" }, new Product { Text = "SuperLCD 70", Price = 4000, Image = "../../images/ProductsLarge/9.png" }, new Product { Text = "SuperPlasma 50", Price = 1700, Image = "../../images/ProductsLarge/3.png" } } }, new Product { Text = "Monitors", Items = new List<Product> { new Product { Text = "19\"", Items = new List<Product> { new Product { Text = "DesktopLCD 19", Price = 160, Image = "../../images/ProductsLarge/10.png" } } }, new Product { Text = "21\"", Items = new List<Product> { new Product { Text = "DesktopLCD 21", Price = 170, Image = "../../images/ProductsLarge/12.png" }, new Product { Text = "DesktopLED 21", Price = 180, Image = "../../images/ProductsLarge/13.png" } } } } }, new Product { Text = "Projectors", Items = new List<Product> { new Product { Text = "Projector Plus", Price = 550, Image = "../../images/ProductsLarge/14.png" }, new Product { Text = "Projector PlusHD", Price = 750, Image = "../../images/ProductsLarge/15.png" } } } } }; public static List<Product> Products = new List<Product> { new Product { Text = "Stores", Expanded = true, Items = new List<Product> { SuperMartOfTheWest, Braeburn, EMart, Walters } } }; } }
#treeview { height: 400px; } .options { padding: 20px; position: absolute; bottom: 0; right: 0; width: 260px; top: 0; background-color: rgba(191, 191, 191, 0.15); } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } .option > .dx-selectbox { display: inline-block; vertical-align: middle; max-width: 350px; width: 100%; margin-top: 5px; }