Card View - Search Panel

To enable user data search, activate the searchPanel by setting its visible property to true.

CardView searches through all fields, whether visible or hidden. To limit search operations within visible fields, enable the searchPanel.searchVisibleColumnsOnly property. To omit specific fields, set the field’s allowSearch property to false.

Backend API

@model IEnumerable<DevExtreme.MVC.Demos.Models.CardView.SearchPanel.Task> @(Html.DevExtreme().CardView() .ID("cardView") .DataSource(Model) .KeyExpr("Task_ID") .CardsPerRow(Mode.Auto) .CardMinWidth(310) .WordWrapEnabled(true) .Columns(c => { c.Add() .DataField("Task_Subject") .Caption("Subject"); c.Add() .DataField("Task_Start_Date") .DataType(GridColumnDataType.Date) .Caption("Start Date"); c.Add() .DataField("Task_Due_Date") .DataType(GridColumnDataType.Date) .Caption("Due Date"); c.Add() .DataField("Task_Priority") .Caption("Priority"); c.Add() .DataField("Task_Status") .Caption("Status"); }) .HeaderFilter(hf => hf.Visible(true)) .SearchPanel(sp => sp.Visible(true).Text("an")) )

using DevExtreme.MVC.Demos.Models.CardView.ColumnChooser; using DevExtreme.MVC.Demos.Models.CardView.ColumnHeaderFilter; using DevExtreme.MVC.Demos.Models.CardView.ColumnReordering; using DevExtreme.MVC.Demos.Models.CardView.DataValidation; using DevExtreme.MVC.Demos.Models.CardView.FilterPanel; using DevExtreme.MVC.Demos.Models.CardView.Overview; using DevExtreme.MVC.Demos.Models.CardView.PopupEditing; using DevExtreme.MVC.Demos.Models.CardView.SearchPanel; using DevExtreme.MVC.Demos.Models.CardView.Selection; using DevExtreme.MVC.Demos.Models.CardView.SimpleArray; using DevExtreme.MVC.Demos.Models.CardView.Sorting; using DevExtreme.MVC.Demos.Models.SampleData; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class CardViewController : Controller { public ActionResult SearchPanel() { return View(SearchPanelSampleData.Tasks); } } }

Numeric, date, and Boolean values match if they are equal to the search query. String values match if they contain the query. Search for string values is case-insensitive.

To specify a search query in code, set the searchPanel.text property or call the searchByText(text) method.