Your search did not match any results.
List

List with Search Bar

Documentation

This demo shows the List widget with the searching capability enabled. Depending on the search mode, the widget finds entries that contain your search string or entries that only start with it.

@model IEnumerable<DevExtreme.NETCore.Demos.Models.ListProduct> <div class="list-container"> @(Html.DevExtreme().List() .ID("list") .DataSource(Model) .Height(400) .SearchEnabled(true) .SearchExpr(new string[] { "Name" }) .ItemTemplate("<div><%= Name %></div>") ) </div> <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) { $("#list").dxList("option", "searchMode", e.value); } </script>
using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ListController : Controller { public ActionResult ListWithSearchBar() { return View(SampleData.ListProducts); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class ListProduct { public int ID { get; set; } public string Name { get; set; } public double Price { get; set; } public int? CurrentInventory { get; set; } public int Backorder { get; set; } public int Manufacturing { get; set; } public string Category { get; set; } public string ImageSrc { get; set; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<ListProduct> ListProducts = new List<ListProduct> { new ListProduct() { ID = 1, Name = "HD Video Player", Price = 330, CurrentInventory = 225, Backorder = 0, Manufacturing = 10, Category = "Video Players", ImageSrc = "../../images/ProductsLarge/1.png" }, new ListProduct() { ID = 3, Name = "SuperPlasma 50", Price = 2400, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/3.png" }, new ListProduct() { ID = 4, Name = "SuperLED 50", Price = 1600, CurrentInventory = 77, Backorder = 0, Manufacturing = 55, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/4.png" }, new ListProduct() { ID = 5, Name = "SuperLED 42", Price = 1450, CurrentInventory = 445, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/5.png" }, new ListProduct() { ID = 6, Name = "SuperLCD 55", Price = 1350, CurrentInventory = 345, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/6.png" }, new ListProduct() { ID = 7, Name = "SuperLCD 42", Price = 1200, CurrentInventory = 210, Backorder = 0, Manufacturing = 20, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/7.png" }, new ListProduct() { ID = 8, Name = "SuperPlasma 65", Price = 3500, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/8.png" }, new ListProduct() { ID = 9, Name = "SuperLCD 70", Price = 4000, CurrentInventory = 95, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../images/ProductsLarge/9.png" }, new ListProduct() { ID = 10, Name = "DesktopLED 21", Price = 175, CurrentInventory = null, Backorder = 425, Manufacturing = 75, Category = "Monitors", ImageSrc = "../../images/ProductsLarge/10.png" }, new ListProduct() { ID = 12, Name = "DesktopLCD 21", Price = 170, CurrentInventory = 210, Backorder = 0, Manufacturing = 60, Category = "Monitors", ImageSrc = "../../images/ProductsLarge/12.png" }, new ListProduct() { ID = 13, Name = "DesktopLCD 19", Price = 160, CurrentInventory = 150, Backorder = 0, Manufacturing = 210, Category = "Monitors", ImageSrc = "../../images/ProductsLarge/13.png" }, new ListProduct() { ID = 14, Name = "Projector Plus", Price = 550, CurrentInventory = null, Backorder = 55, Manufacturing = 10, Category = "Projectors", ImageSrc = "../../images/ProductsLarge/14.png" }, new ListProduct() { ID = 15, Name = "Projector PlusHD", Price = 750, CurrentInventory = 110, Backorder = 0, Manufacturing = 90, Category = "Projectors", ImageSrc = "../../images/ProductsLarge/15.png" }, new ListProduct() { ID = 17, Name = "ExcelRemote IR", Price = 150, CurrentInventory = 650, Backorder = 0, Manufacturing = 190, Category = "Automation", ImageSrc = "../../images/ProductsLarge/17.png" }, new ListProduct() { ID = 18, Name = "ExcelRemote BT", Price = 180, CurrentInventory = 310, Backorder = 0, Manufacturing = 0, Category = "Automation", ImageSrc = "../../images/ProductsLarge/18.png" }, new ListProduct() { ID = 19, Name = "ExcelRemote IP", Price = 200, CurrentInventory = 0, Backorder = 325, Manufacturing = 225, Category = "Automation", ImageSrc = "../../images/ProductsLarge/19.png" } }; } }
.dx-list-item-content > div { padding: 5px; font-size: 15px; } .options { margin-top: 20px; padding: 20px; background-color: rgba(191, 191, 191, 0.15); } .options .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } .option > span { margin-right: 10px; } .option > .dx-selectbox { display: inline-block; vertical-align: middle; max-width: 350px; width: 100%; }