PhoneJS 14.1 DataSource filter

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.1.6/css/dx.ios7.default.css">
<script src="http://cdn3.devexpress.com/jslib/14.1.6/js/dx.phonejs.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.1.6/css/dx.common.css">
<div id="list"></div>

CSS

.dx-list {
    height: 300px;
}

JavaScript

var employees = [
    {
        key: 'Management',
        items: [
            { name: "Bob", hired: 2005 },
            { name: "John", hired: 2007 },
            { name: "Frank", hired: 2001 },
            { name: "Robert", hired: 2007 }
        ]
    },
    {
        key: 'Manufacturing',
        items: [
            { name: "Paul", hired: 2011 },
            { name: "Elizabeth", hired: 2000 },
            { name: "Mary", hired: 2002 },
            { name: "Michael", hired: 2003 },
            { name: "George", hired: 2002 }
        ]
    },
    {
        key: 'Sales',
        items: [
            { name: "Deborah", hired: 2000 },
            { name: "Lisa", hired: 1999 },
            { name: "Mark", hired: 2011 },
            { name: "Joseph", hired: 2000 }
        ]
    }
];

var list = $("#list").dxList({ 
    grouped: true,
    groupRender: function(group) {
        return group.key;
    },
    itemRender: function(emp) {
        return $("<div>").text(emp.name + "(hired at " + emp.hired + ")");
    }
});

list.dataSource = employees;