filter refresh

by grippstick

HTML

<link rel="stylesheet" href="https://aligntoday.com/Kendo/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://aligntoday.com/Kendo/styles/kendo.flat.min.css">
<script src="https://aligntoday.com/Kendo/js/jquery.min.js"></script>
<script src="https://aligntoday.com/Kendo/js/kendo.all.min.js"></script>
<div id='container'>
    <span data-bind='text:selectedSound.Name'></span>
    <ul data-role='listview' data-bind='source:ds' data-template='tmpl'></ul>
    <script id="tmpl" type="text/x-kendo-template">
        <li><button data-bind='click:clickSelectedSound'>#=data.Name#</button></li>
    </script>
</div>

JavaScript

var $container = $('#container');

var data=[{
            Name: "default"
        }, {
            Name: "Sound 1"
        }, {
            Name: "Sound 2"
        }];

var vm = new kendo.observable({
    selectedSound:{},
    ds: new kendo.data.DataSource({
        data: data,
        filter: {
            field: "Selected",
            operator: "neq",
            value: true
        },
        schema:{
            model:{
                ID:"Name"
            }
        }
    }),
    clickSelectedSound:function(e){
        var selected = e.data;
        
        var old = vm.get('selectedSound');
        
        if(old){
            old.set('Selected',false);                        
        }
        
        selected.set('Selected',true);
        
        vm.set('selectedSound',selected);

        
        vm.ds.filter({
            field: "Selected",
            operator: "neq",
            value: true
        });
        
    }
});


kendo.bind($container, vm);