Using Knockout to Filter ViewModel Data Using Multiple Fields/Columns and Controls

Question

I'm new to KnockoutJS but am liking it so far. What I'm trying to do is filter my viewmodel's data using multiple fields/columns and controls on the form, but I'm not sure how to do it. Let me (hopefully) explain further.

I have a viewmodel observable array of data that is populated with JSON data from a backend database. This collection of data has multiple columns that I'd like to filter on so that the display changes to only display the selected items. I've followed the example using ko.utils.arrayFilter and ko.utils.stringStartsWith as seen on the link http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html. This works great as a search type of filter - but only on one field in my table of data (viewmodel).

First question: Is there a way to extend this example to have the value typed in the textbox searched for in multiple columns of the viewmodel with the results being returned for display?

More importantly, however, is my situation where I have multiple controls of different types (dropdown with a list of values, radio buttons with different options, etc.) on the form and I need to filter the full data set based on the options selected in these controls. And, the valid values of the controls relate to different columns/fields in the viewmodel data set.

I hope this is making sense. Basically, we're trying to replace a Windows forms app that has this same functionality. That is, for the Windows forms app, all the filtering options are building a big where clause for a SQL select (e.g., WHERE Name = 'name chosen in dropdown' AND Priority IN (one or more checkbox options that are checked) AND View = selected radio button etc.). The SQL query is then sent to the database with the results placed into a grid.

So, is there any way for me to use multiple filter values on multiple fields in the viewmodel (and knockout, of course) to filter and display my data all on the client side? Or do I have to follow a similar idea as the Windows app and requery the database with a where clause from the selected options?

Thanks!

Please let me know if you need any more details (it's kind of hard to explain in writing).

Answer 1

You would just combine the terms in your arrayFilter, like this.

self.filteredRecords = ko.computed(function() {
        return ko.utils.arrayFilter(self.records(), function(r) {
            return (self.idSearch().length == 0 ||
                       ko.utils.stringStartsWith(r.id, self.idSearch())) &&
                   (self.nameSearch().length == 0 || 
                       ko.utils.stringStartsWith(r.name.toLowerCase(), self.nameSearch().toLowerCase())) &&
                  (self.townSearch().length == 0 ||
                       r.homeTown == self.townSearch())
        });
    });

Here is is working in a fiddle