Filter Data By a Set of Strings Using Knockoutjs in ASP.Net Application

Introduction

This article explains how to filter data by a set of strings using Knokcoutjs in an ASP.NET Application.

This article will help you to filter a set of data by a set of strings that are predefined.

Step 1

First of all we will work on the View Model of our application that is the main part of today's application.

Write this code in the View Model of your application.

        <script>

            var viewModel = function () {

                var self = this;

                self.people = ko.observableArray([

                    { initialName: 'Anubhav', surName: 'Chaudhary', age: 24 },

                    { initialName: 'Mohit', surName: 'Chaudhary', age: 16 },

                    { initialName: 'S.P', surName: 'Singh', age: 52 },

                    { initialName: 'Santosh', surName: 'Singh', age: 47 },

                    { initialName: 'Ankit', surName: 'Chaudhary', age: 17 },

                    { initialName: 'Megha', surName: 'Singh', age: 24 },

                    { initialName: 'Pooja', surName: 'Chaudhary', age: 28 }

                ]);

 

                self.headers = [

                    { title: 'First Name', sortPropertyName: 'initialName', asc: true },

                    { title: 'Last Name', sortPropertyName: 'surName', asc: true },

                    { title: 'Age', sortPropertyName: 'age', asc: true }

                ];

                self.filters = [

                    { title: 'Show All', filter: null },

                    { title: 'Only Chaudharys', filter: function (item) { return item.surName == 'Chaudhary'; } },

                    { title: 'Only Singhs', filter: function (item) { return item.surName == 'Singh'; } },

                    { title: 'Only Adults', filter: function (item) { return item.age >= 18; } }

                ];

 

                self.activeSort = self.headers[0];

                self.sort = function (header, event) {

                    if (self.activeSort === header) {

                        header.asc = !header.asc;

                    } else {

                        self.activeSort = header;

                    }

                    var prop = self.activeSort.sortPropertyName;

                    var ascSort = function (a, b) { return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };

                    var descSort = function (a, b) { return a[prop] > b[prop] ? -1 : a[prop] < b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };

                    var sortFunc = self.activeSort.asc ? ascSort : descSort;

                    self.people.sort(sortFunc);

                };

 

                self.activeFilter = ko.observable(self.filters[0].filter);

                self.filteredPeople = ko.computed(function () {

                    if (self.activeFilter()) {

                        return ko.utils.arrayFilter(self.people(), self.activeFilter());

                    } else {

                        return self.people();

                    }

                });

                self.setActiveFilter = function (model, event) {

                    self.activeFilter(model.filter);

                };

            }

            ko.applyBindings(new viewModel());

        </script>

Here first I provided a set of Static Data on which filtration is to be done, I had provided this data in an array named "people." In this array I provided the First Name, Surname and Age of Persons.

After that I provided the headers that will be used to provide the title of the headers.

Then filters are used in which the following four things are defined:

1. Show All
2. Only Chaudharys
3. Only Singhs
4. Only Adults

These four things will help in filtering the data. "Show All" will not filter the data, it will show all the data. "Only Chaudharys" will filter those data whose Surname is equal to Chaudharys. "Only Singhs" will filter those persons whose Surname is equal to Singh and "Only Adults" will filter the data by their age.

Then I provided the sorting on the header of each column, this sorting will sort the data in Ascending Order when the user clicks on the Header of each coluimn.

After that, two functions are created named ascSort and desSort. These functions will help to Sort the Data in Ascending and Descending order.

After that I had created an Observable named activeFilter, this Observable has the values of filters.

Step 2

Now we will move to the View of our application.

<div data-bind="foreach: filters">

<input type="button" data-bind="click: $parent.setActiveFilter, value: title"/>

</div>

<br/>

<table>

<thead>

    <tr data-bind="foreach: headers">

        <th data-bind="click: $parent.sort, text: title"></th>

    </tr>

</thead>

    <tbody data-bind="foreach: filteredPeople">

        <tr>

            <td data-bind="text: initialName"></td>

            <td data-bind="text: surName"></td>

            <td data-bind="text: age"></td>

        </tr>

    </tbody>

</table>

Here first I had bound the Button with the ActiveFilter, this will create four Buttons that will be bound to the four titles provided in the filters.

Aftre that I had bound the <tr> tag with the header Array, in this tr I had provided a <th> that is bound with the "sort", so if the user clicks on the header of each column then the data of that column will be sorted.

Now our application is ready to run and you can see the output as follows.

Output

First of all you will get a output like this:

After that if you click on any of the buttons then the data will be filtered by the sorting bound on that button like in the next image I had clicked on the "only Chaudharys" and it's showing the data whose surname is Chaudhary.

After that I had sorted the data by the Surname, this is done by clicking on the Header tag of "Surname."