Filtering in JQuery ListView widget

8 Jan 20181 minute to read

Filtering is one of the key features of ListView control. The Filtering option is added into the ListView control when the enableFiltering property is set to “true”. This enables a simple interface to filter items from a large collection of ListView items.

Refer the following code examples.

  • html
  • <div id="defaultListView">
            <ul>
                <li data-ej-text="Artwork"></li>
                <li data-ej-text="Abstract"></li>
                <li data-ej-text="2 Acrylic Mediums"></li>
                <li data-ej-text="Creative Acrylic"></li>
                <li data-ej-text="Modern Painting"></li>
                <li data-ej-text="Canvas Art"></li>
                <li data-ej-text="Black white"></li>
                <li data-ej-text="Children"></li>
                <li data-ej-text="Preschool Crafts"></li>
                <li data-ej-text="School-age Crafts"></li>
            </ul>
        </div>

    Add the following script in your code.

  • javascript
  • $(function () {
                $("#defaultListView").ejListView({ width: 300, enableFiltering: true });
            });

    Screenshot:

    Filtering_img1

    Before Filtering

    Filtering_img2

    After Filtering