@(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[] { "contains", "startsWith", "equals" })
.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.MVC.Demos.Models;
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.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;
using System.Web;
namespace DevExtreme.MVC.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 IEnumerable<Product> Items { get; set; }
public int Price { get; set; }
public string Image { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public static class TreeViewHierarchicalDataForSearch {
public static Product SuperMartOfTheWest = new Product {
Text = "Super Mart of the West",
Expanded = true,
Items = new[] {
new Product {
Text = "Video Players",
Items = new[] {
new Product {
Text = "HD Video Player",
Price = 220,
Image = "../../Content/Images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 270,
Image = "../../Content/Images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Televisions",
Items = new[] {
new Product {
Text = "SuperLCD 42",
Price = 1200,
Image = "../../Content/Images/ProductsLarge/7.png"
},
new Product {
Text = "SuperLED 42",
Price = 1450,
Image = "../../Content/Images/ProductsLarge/5.png"
},
new Product {
Text = "SuperLED 50",
Price = 1600,
Image = "../../Content/Images/ProductsLarge/4.png"
},
new Product {
Text = "SuperLCD 55",
Price = 1350,
Image = "../../Content/Images/ProductsLarge/6.png"
},
new Product {
Text = "SuperLCD 70",
Price = 4000,
Image = "../../Content/Images/ProductsLarge/9.png"
}
}
},
new Product {
Text = "Monitors",
Items = new[] {
new Product {
Text = "19\"",
Items = new[] {
new Product {
Text = "DesktopLCD 19",
Price = 160,
Image = "../../Content/Images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 170,
Image = "../../Content/Images/ProductsLarge/12.png"
},
new Product {
Text = "DesktopLED 21",
Price = 175,
Image = "../../Content/Images/ProductsLarge/13.png"
}
}
}
}
},
new Product {
Text = "Projectors",
Items = new[] {
new Product {
Text = "Projector Plus",
Price = 550,
Image = "../../Content/Images/ProductsLarge/14.png"
},
new Product {
Text = "Projector PlusHD",
Price = 750,
Image = "../../Content/Images/ProductsLarge/15.png"
}
}
}
}
};
public static Product Braeburn = new Product {
Text = "Braeburn",
Items = new[] {
new Product {
Text = "Video Players",
Items = new[] {
new Product {
Text = "HD Video Player",
Price = 240,
Image = "../../Content/Images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 300,
Image = "../../Content/Images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Televisions",
Items = new[] {
new Product {
Text = "SuperPlasma 50",
Price = 1800,
Image = "../../Content/Images/ProductsLarge/3.png"
},
new Product {
Text = "SuperPlasma 65",
Price = 3500,
Image = "../../Content/Images/ProductsLarge/8.png"
}
}
},
new Product {
Text = "Monitors",
Items = new[] {
new Product {
Text = "19\"",
Items = new[] {
new Product {
Text = "DesktopLCD 19",
Price = 170,
Image = "../../Content/Images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 180,
Image = "../../Content/Images/ProductsLarge/12.png"
},
new Product {
Text = "DesktopLED 21",
Price = 190,
Image = "../../Content/Images/ProductsLarge/13.png"
}
}
}
}
}
}
};
public static Product EMart = new Product {
Text = "E-Mart",
Items = new[] {
new Product {
Text = "Video Players",
Items = new[] {
new Product {
Text = "HD Video Player",
Price = 220,
Image = "../../Content/Images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 275,
Image = "../../Content/Images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Monitors",
Items = new[] {
new Product {
Text = "19\"",
Items = new[] {
new Product {
Text = "DesktopLCD 19",
Price = 165,
Image = "../../Content/Images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 175,
Image = "../../Content/Images/ProductsLarge/12.png"
}
}
}
}
}
}
};
public static Product Walters = new Product {
Text = "Walters",
Items = new[] {
new Product {
Text = "Video Players",
Items = new[] {
new Product {
Text = "HD Video Player",
Price = 210,
Image = "../../Content/Images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 250,
Image = "../../Content/Images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Televisions",
Items = new[] {
new Product {
Text = "SuperLCD 42",
Price = 1100,
Image = "../../Content/Images/ProductsLarge/7.png"
},
new Product {
Text = "SuperLED 42",
Price = 1400,
Image = "../../Content/Images/ProductsLarge/5.png"
},
new Product {
Text = "SuperLED 50",
Price = 1500,
Image = "../../Content/Images/ProductsLarge/4.png"
},
new Product {
Text = "SuperLCD 55",
Price = 1300,
Image = "../../Content/Images/ProductsLarge/6.png"
},
new Product {
Text = "SuperLCD 70",
Price = 4000,
Image = "../../Content/Images/ProductsLarge/9.png"
},
new Product {
Text = "SuperPlasma 50",
Price = 1700,
Image = "../../Content/Images/ProductsLarge/3.png"
}
}
},
new Product {
Text = "Monitors",
Items = new[] {
new Product {
Text = "19\"",
Items = new[] {
new Product {
Text = "DesktopLCD 19",
Price = 160,
Image = "../../Content/Images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 170,
Image = "../../Content/Images/ProductsLarge/12.png"
},
new Product {
Text = "DesktopLED 21",
Price = 180,
Image = "../../Content/Images/ProductsLarge/13.png"
}
}
}
}
},
new Product {
Text = "Projectors",
Items = new[] {
new Product {
Text = "Projector Plus",
Price = 550,
Image = "../../Content/Images/ProductsLarge/14.png"
},
new Product {
Text = "Projector PlusHD",
Price = 750,
Image = "../../Content/Images/ProductsLarge/15.png"
}
}
}
}
};
public static IEnumerable<Product> Products = new[] {
new Product {
Text = "Stores",
Expanded = true,
Items = new[] {
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;
}