JavaScript DataSource Filtering

In this blog post entry, we look in greater detail into the filtering capabilities of the ShieldUI DataSource javascript component.
Shield UI DataSource provides a robust, fully-featured mechanism for filtering data locally on the client-side. To setup filtering during initialization, set the filter option:

1 2 3 4 5 6 7 8

var ds = new shield.DataSource( {     data: [/*...*/],     filter: { path: "age", filter: "eq", value: 27 } }); ds.read().then(function () {     var dataView = ds.view;     //dataView contains the filtered data });

To modify filter options after the control has been initialized, set the filter property of the DataSource:

1 2 3 4 5

ds.filter = { path: "name", filter: "starts", value: "M" } ds.read().then(function () {     var dataView = ds.view;     //dataView contains the newly filtered data });

The above code snippets both set a single filter expression. Each filter expression is a JavaScript object containing three fields:
path - a string of the form “property.subproperty”, specifying the path to the property to filter by.
filter - the name of a predefined filter function to use.
value - the literal value to filter by. In case a custom filter function is specified,this field is omitted.

Following is the set of predefined filter functions:

“eq” - equal (aliases: “equal”, “equals”, “==”)
“neq” - not equal (aliases: “ne”, “doesnotequal”, “notequal”, “notequals”, “!=”)
“con” - contains (aliases: “contains”)
“notcon” - does not contain (aliases: “doesnotcontain”, “notcontains”)
“starts” - string starts with (aliases: “startswith”)
“ends” - string ends with (aliases: “endswith”)
“gt” - greater than (aliases: “greaterthan”, “>”)
“lt” - less than (aliases: “lessthan”, “<”)
“gte” - greater than or equal (aliases: “ge”, “greaterthanorequal”, “>=”)
“lte” - less than or equal (aliases: “le”, “lessthanorequal”, “<=”)
“isnull” - is null (aliases: “null”)
“notnull” - is not null (aliases: “isnotnull”)

If a custom filtering mechanism is required, Shield UI DataSource supports custom filter functions specified in place of filter expression objects:

1 2 3 4 5 6 7 8 9 10 11

var ds = new shield.DataSource( {     data: [/*...*/],     filter: function (dataItem) {         //custom filter function         return dataItem.age > 27 && dataItem.lastName.chartAt(0) === "C"     } }); ds.read().then(function () {     var dataView = ds.view;     //dataView contains the custom filtered data });

By default, Shield UI DataSource filters data locally on the client-side. However, server-side filtering is also supported. If the DataSource is configured for remote web service binding and the DataSource.transport.operations array contains “filter”, the component sends filter expressions on the server and does not filter the data locally.

Shield UI DataSource supports a combination of multiple filter expressions (a compound filter expression) along with the logical “and” / ”or” operations between them. To provide a compound filter expression, use a JavaScript object with a single field named “and” or “or” to specify the logical operator. The field must contain a JavaScript array with other filter expressions. These can be simple or compound, thus allowing for the logical nesting of multiple filter expressions into a single compound expression:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

var ds = new shield.DataSource( {     data: [/*...*/],     //a compound filter expression containing a combination of a simple     //and another compound expression, specifying the selection of     //all data items with "category" field greater than or equal to 2     //and all data items with either "age" less than 40 or "retired" equal to false     filter: {         and: [             { path: "category", filter: ">=", value: 2 },             {                 or: [                     { path: "age", filter: "<", value: 40 },                     { path: "retired", filter: "eq", value: false }                 ]             }         ]     } }); ds.read().then(function () {     var dataView = ds.view;     //dataView contains the data with compound filter applied });