Your search did not match any results.
List

List with Search Bar

Documentation
This demo shows how you can implement search in the List widget. For this purpose, utilize the TextBox widget as a search bar.
@model IEnumerable<DevExtreme.NETCore.Demos.Models.ListProduct> <div class="dx-searchbar"> @(Html.DevExtreme().TextBox() .ValueChangeEvent("keyup") .Placeholder("Search") .Mode(TextBoxMode.Search) .OnValueChanged("textBox_onValueChanged") ) </div> <div class="list-container"> @(Html.DevExtreme().List() .ID("list") .DataSource(Model) .DataSourceOptions(dso => dso .SearchOperation(FilterOperations.Contains) .SearchExpr("Name") ) .ItemTemplate("<div><%= Name %></div>") ) </div> <script> function textBox_onValueChanged(e) { var dataSource = $("#list").dxList("instance").getDataSource(); dataSource.searchValue(e.value); dataSource.load(); } </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" } }; } }
.list-container { width: 100%; height: auto; position: absolute; top: 41px; bottom: 0; } .dx-list-item-content > div { padding: 5px; font-size: 15px; }