Filter List Items in the ListView

21 Dec 20226 minutes to read

The filtered data can be displayed in the ListView component depending upon on user inputs using the DataManager. Refer to the following steps to render the ListView with filtered data.

  • Render a textbox to get input for filtering data.

  • Render ListView with dataSource, and set the sortOrder property.

  • Bind the keyup event for textbox to perform filtering operation. To filter list data, pass the list data source to the DataManager, manipulate the data using the executeLocal method, and then update filtered data as ListView dataSource.

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists;
<div id="sample">
    <input class="e-input" type="text" id="textbox" placeholder="Filter" title="Type in a name">
    @Html.EJS().ListView("list").DataSource((IEnumerable<object>)ViewBag.dataSource).Fields(new ListViewFieldSettings { Id = "id", Text = "text" }).SortOrder(SortOrder.Ascending).Render()

    #list {
        box-shadow: 0 1px 4px #ddd;
        border-bottom: 1px solid #ddd;

    #sample {
        height: 220px;
        margin: 0 auto;
        display: block;
        max-width: 350px;
    document.getElementById("textbox").addEventListener("keyup", onKeyUp);
    //Here, the list items are filtered using the DataManager instance for ListView
    function onKeyUp() {
        var listData  = @(Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.dataSource)));
        var listObj = (document.getElementById("list")).ej2_instances[0];
        var value = (document.getElementById("textbox")).value;
        var data = new
          new"text", "startswith", value, true)
        if (!value) {
            listObj.dataSource = listData.slice();
        } else {
            listObj.dataSource = data;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
    public class ListViewController : Controller
        public IActionResult list()
           List<object> listdata = new List<object>();
                text = "Hennessey Venom",
                id = "list-01"

            }); listdata.Add(new
                text = "Bugatti Chiron",
                id = "list-02"

            }); listdata.Add(new
                text = "Bugatti Veyron Super Sport",
                id = "list-03"

            }); listdata.Add(new
                text = "SSC Ultimate Aero",
                id = "list-04"

            }); listdata.Add(new
                text = "Koenigsegg CCR",
                id = "list-05"

            }); listdata.Add(new
                text = "McLaren F1",
                id = "list-06"
            ViewBag.dataSource = listdata;
            return View();


In this demo, data has been filtered with starting character of the list items. You can also filter list items with ending character by passing the endswith in where clause instead of startswith.