jQWidgets Grid Filtering Test

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<div id="myApp"></div>

CSS

body {
    background-color: #ffe;
}
#myApp {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
}

JavaScript

var myTable = $('<div id="myTable"></div>')
$('#myApp').append(myTable);

var source = {
    localdata: [
        ["Alfreds Futterkiste", "Maria Anders"],
        ["Ana Trujillo Emparedados y helados", "Ana Trujillo"],
        ["Antonio Moreno Taquera", "Antonio Moreno"],
        ["Around the Horn", "Thomas Hardy"],
        ["Berglunds snabbkp", "Christina Berglund"],
        ["Blauer See Delikatessen", "Hanna Moos"],
        ["Blondesddsl pre et fils", "Frdrique Citeaux"]
    ],
    datafields: [{
        name: 'Company',
        map: '0',
    }, {
        name: 'Contact',
        map: '1',
    }],
    datatype: "array"
};

myTable.jqxGrid({
    width: "100%",
    height: "100%",
    columnsresize: true,
    sortable: true,
    filterable: true,
    source: new $.jqx.dataAdapter(source),
    columns: [{
        text: 'Company Name',
        datafield: 'Company',
        width: 250
    }, {
        text: 'Contact Name',
        datafield: 'Contact',
        width: 180
    }]
});


var fgroup = new $.jqx.filter();
var filter1 = fgroup.createfilter('stringfilter', 'an', 'contains');
var filter2 = fgroup.createfilter('stringfilter', 'bl', 'contains');
fgroup.addfilter(0, filter1); // first argument: 0=AND, 1=OR
fgroup.addfilter(1, filter2); // first argument: 0=AND, 1=OR
myTable.jqxGrid('addfilter', 'Company', fgroup);
myTable.jqxGrid('applyfilters');