KendoUI MVVM grid with custom filters

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<script>
    var customNameFilter = customNameFilter || null;
</script>
<div id="test">
    <div data-role="grid"
         data-filterable="true"
         data-columns="[
            { field: 'Id', hidden: 'true' },
            { field: 'Name', filterable: { ui: customNameFilter } },
            { field: 'Value' }
         ]"
         data-bind="source: gridDs">
    </div>
</div>

CSS

#test {
    margin-top: 30px; /* result button is blocking filter btn */
}

JavaScript

var viewModel = kendo.observable({
    gridDs: new kendo.data.DataSource({
        data: [
            { Id: 1, Name: "Test1", Value: 3 },
            { Id: 2, Name: "Test2", Value: 5 },
            { Id: 3, Name: "Test3", Value: 2 },
            { Id: 4, Name: "Test4", Value: 7 }
        ]
	})
});

kendo.bind($('#test'), viewModel);

// data-filterable not working
var customGridFilter = {
    extra: false,
    operators: {
        string: {
            contains: "Contains",
            doesnotcontain: "Does not contain",
            eq: "Is equal to",
            neq: "Is not equal to",
            startswith: "Starts with",
            endswith: "Ends with"
        }
    }
};

// column filterable ui not working
var customNameFilter = function (e) {
    e.kendoComboBox({
        dataSource: {
            data: [
                { Id: 1, Name: "Test1" },
                { Id: 2, Name: "Test2" },
                { Id: 3, Name: "Test3" }
            ]
        },
        dataValueField: "Id",
        dataTextField: "Name",
        filter: "contains"
    });
}

// this doesn't work
//var grid = $('#test').data('kendoGrid');
//grid.options.filterable = customFilter;