Filter List Items In The Listview in ASP.NET MVC Listview Component

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.

CSHTML
List.cs
@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()
</div>

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

    #sample {
        height: 220px;
        margin: 0 auto;
        display: block;
        max-width: 350px;
    }
</style>
<script>
    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 ej.data.DataManager(listData).executeLocal(
          new ej.data.Query().where("text", "startswith", value, true)
        );
        if (!value) {
            listObj.dataSource = listData.slice();
        } else {
            listObj.dataSource = data;
        }
        listObj.dataBind();
    }
</script>
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>();
            listdata.Add(new
            {
                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();
        }       
    }
}

NOTE

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.

Filter List Items in the ListView