Kendo MVVM Grid with custom filters

Question

I'm building a Kendo Grid using the MVVM pattern and I want 2 custom filters:

A general grid filter with extra = false and custom operators
A custom column filter with a combobox

Very similar to this Kendo Grid demo . I just can't seem to get it working with MVVM pattern using data-filterable attribute or filterable ui on the column:

<div data-role="grid"
     data-filterable="customGridFilter"
     data-columns="[
        { field: 'Id', hidden: 'true' },
        { field: 'Name', filterable: '{ ui: customNameFilter }' },
        { field: 'Value' }
     ]"
     data-bind="source: gridDs">
</div>

I've created a JS Fiddle to illustrate what I'm going for.

Answer 1

Actually it just missed some point like

data-filterable="customGridFilter" should become data-filterable="true" ,
and also in the kendo dojo they are using jQuery 1.9.1 and yours is compact(edge) which cause the issue.

After changing to jQuery 1.9.1 it works fine like below

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.all.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script> </head> <body> <div id="test"> <script> var customNameFilter = customNameFilter || null; </script> <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> <script> $(document).ready(function() { customNameFilter = function(e) { console.log("test") e.kendoComboBox({ dataSource: { data: [{ Id: 1, Name: "Test1" }, { Id: 2, Name: "Test2" }, { Id: 3, Name: "Test3" }] }, dataValueField: "Id", dataTextField: "Name", filter: "contains" }); }; 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 }] }), 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" } } }, }); kendo.bind($('#test'), viewModel); }); // this doesn't work //var grid = $('#test').data('kendoGrid'); //grid.options.filterable = customFilter; </script> </body> </html>

Kendo MVVM Grid with custom filters

Question

1 answers

solution1
1 ACCPTED 2015-11-10 00:56:24

Kendo MVVM Grid with custom filters

Question

1 answers

solution1 1 ACCPTED 2015-11-10 00:56:24

solution1
1 ACCPTED 2015-11-10 00:56:24