To add a search bar to the List and enable the search functionality, do the following:
Set the searchEnabled property to true.
Specify the searchExpr property. It is used to compare the search string against a specific field in your data objects. In this example, the search string is compared against the "Name" field.
Use the searchMode property to specify whether list items should start with, contain, or match the search string. In this example, you can use the drop-down menu under the List to change the searchMode.
@model IEnumerable<DevExtreme.MVC.Demos.Models.ListProduct>
<div class="list-container">
@(Html.DevExtreme().List()
.ID("list")
.DataSource(Model)
.Height(400)
.SearchEnabled(true)
.SearchExpr(new[] { "Name" })
.ItemTemplate("<div><%- Name %></div>")
)
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Search mode</span>
@(Html.DevExtreme().SelectBox()
.InputAttr("aria-label", "Search Mode")
.ID("searchMode")
.DataSource(new[] { "contains", "startsWith", "equals" })
.Value("contains")
.OnValueChanged("selectBox_valueChanged")
)
</div>
</div>
<script>
function selectBox_valueChanged(e) {
$("#list").dxList("option", "searchMode", e.value);
}
</script>
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ListController : Controller {
public ActionResult Search() {
return View(SampleData.ListProducts);
}
}
}using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.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;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<ListProduct> ListProducts = new[] {
new ListProduct() {
ID = 1,
Name = "HD Video Player",
Price = 330,
CurrentInventory = 225,
Backorder = 0,
Manufacturing = 10,
Category = "Video Players",
ImageSrc = "../../Content/Images/ProductsLarge/1.png"
},
new ListProduct() {
ID = 3,
Name = "SuperPlasma 50",
Price = 2400,
CurrentInventory = 0,
Backorder = 0,
Manufacturing = 0,
Category = "Televisions",
ImageSrc = "../../Content/Images/ProductsLarge/3.png"
},
new ListProduct() {
ID = 4,
Name = "SuperLED 50",
Price = 1600,
CurrentInventory = 77,
Backorder = 0,
Manufacturing = 55,
Category = "Televisions",
ImageSrc = "../../Content/Images/ProductsLarge/4.png"
},
new ListProduct() {
ID = 5,
Name = "SuperLED 42",
Price = 1450,
CurrentInventory = 445,
Backorder = 0,
Manufacturing = 0,
Category = "Televisions",
ImageSrc = "../../Content/Images/ProductsLarge/5.png"
},
new ListProduct() {
ID = 6,
Name = "SuperLCD 55",
Price = 1350,
CurrentInventory = 345,
Backorder = 0,
Manufacturing = 5,
Category = "Televisions",
ImageSrc = "../../Content/Images/ProductsLarge/6.png"
},
new ListProduct() {
ID = 7,
Name = "SuperLCD 42",
Price = 1200,
CurrentInventory = 210,
Backorder = 0,
Manufacturing = 20,
Category = "Televisions",
ImageSrc = "../../Content/Images/ProductsLarge/7.png"
},
new ListProduct() {
ID = 8,
Name = "SuperPlasma 65",
Price = 3500,
CurrentInventory = 0,
Backorder = 0,
Manufacturing = 0,
Category = "Televisions",
ImageSrc = "../../Content/Images/ProductsLarge/8.png"
},
new ListProduct() {
ID = 9,
Name = "SuperLCD 70",
Price = 4000,
CurrentInventory = 95,
Backorder = 0,
Manufacturing = 5,
Category = "Televisions",
ImageSrc = "../../Content/Images/ProductsLarge/9.png"
},
new ListProduct() {
ID = 10,
Name = "DesktopLED 21",
Price = 175,
CurrentInventory = null,
Backorder = 425,
Manufacturing = 75,
Category = "Monitors",
ImageSrc = "../../Content/Images/ProductsLarge/10.png"
},
new ListProduct() {
ID = 12,
Name = "DesktopLCD 21",
Price = 170,
CurrentInventory = 210,
Backorder = 0,
Manufacturing = 60,
Category = "Monitors",
ImageSrc = "../../Content/Images/ProductsLarge/12.png"
},
new ListProduct() {
ID = 13,
Name = "DesktopLCD 19",
Price = 160,
CurrentInventory = 150,
Backorder = 0,
Manufacturing = 210,
Category = "Monitors",
ImageSrc = "../../Content/Images/ProductsLarge/13.png"
},
new ListProduct() {
ID = 14,
Name = "Projector Plus",
Price = 550,
CurrentInventory = null,
Backorder = 55,
Manufacturing = 10,
Category = "Projectors",
ImageSrc = "../../Content/Images/ProductsLarge/14.png"
},
new ListProduct() {
ID = 15,
Name = "Projector PlusHD",
Price = 750,
CurrentInventory = 110,
Backorder = 0,
Manufacturing = 90,
Category = "Projectors",
ImageSrc = "../../Content/Images/ProductsLarge/15.png"
},
new ListProduct() {
ID = 17,
Name = "ExcelRemote IR",
Price = 150,
CurrentInventory = 650,
Backorder = 0,
Manufacturing = 190,
Category = "Automation",
ImageSrc = "../../Content/Images/ProductsLarge/17.png"
},
new ListProduct() {
ID = 18,
Name = "ExcelRemote BT",
Price = 180,
CurrentInventory = 310,
Backorder = 0,
Manufacturing = 0,
Category = "Automation",
ImageSrc = "../../Content/Images/ProductsLarge/18.png"
},
new ListProduct() {
ID = 19,
Name = "ExcelRemote IP",
Price = 200,
CurrentInventory = 0,
Backorder = 325,
Manufacturing = 225,
Category = "Automation",
ImageSrc = "../../Content/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%;
}