Grid filtering problem

by PaulSinnema

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<div id="grid"></div>

CSS

body {
    height: 100%;
}
html {
    height: 100%;
}
#panel1 {
    height: 100%;
}
#horizontal {
    height: 100%;
    margin: 0 auto;
}
#vertical {
    height: 100%;
    margin: 0 auto;
}
#top-pane {
    height: 100%;
}
#left-pane {
    height: 100%;
    background-color: rgba(60, 70, 80, 0.05);
}
#right-pane {
    height: 100%;
    background-color: rgba(60, 70, 80, 0.05);
}
.pane-content {
    height: 100%;
    padding: 0 10px;
}

JavaScript

var dataSource = new kendo.data.DataSource({
    data: [{
        Field1: 'Field1',
        Field2: 'Field2',
        Field3: 'Field3',
        Field4: 'Field4',
        Field5: 'Field5'
    }, {
        Field1: 'Field1',
        Field2: 'Field2',
        Field3: 'Field3',
        Field4: 'Field4',
        Field5: 'Field5'
    }]
});

var treeview = $("#grid").kendoGrid({
    dataSource: dataSource,
    navigatable: true,
    pageable: false,
    sortable: true,
    groupable: true,
    resizable: true,
    filterable: true
    }).data('kendoGrid');

    function onExpand(e) {
        var dataItem = this.dataItem(e.node);
        dataItem.loaded(false);
    }

    $('#appendButton').bind('click', function () {
        treeview.append(toAppend.Data, treeview.select());
    });