JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<script src="http://rniemeyer.github.io/knockout-kendo/js/kendo.web.min.js"></script>
<script src="http://kendo-labs.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
<p>Filter: <input data-bind="value: filter, valueUpdate: 'afterkeydown'" /></p>

<div id="MyGrid" data-bind="kendoGrid: {data:filteredItems, pageable: { buttonCount: 5, pageSize: 5 }}" />

JavaScript

function Item(name, category, price) {
    var self = this;
    self.name = ko.observable(name);
    self.category = ko.observable(category);
    self.price = ko.observable(price);
}

function ViewModel() {
    var self = this;
   
    self.items = ko.observableArray([]);
    self.filter = ko.observable("");
    self.search = ko.observable("");

     
    //ko.utils.arrayFilter - filter the items using the filter text
    
    self.filteredItems = ko.dependentObservable(function() {
        
        var filter = self.filter().toLowerCase();
        if (!filter) {
            var grid = $("#MyGrid").data("kendoGrid");
            if(grid)
            {
            grid.dataSource.page(1);
            }
            return self.items();
        } else {
             var grid = $("#MyGrid").data("kendoGrid");
            if(grid)
            {
            grid.dataSource.page(1);
            }
            return ko.utils.arrayFilter(self.items(), function(item) {
                //debugger;
                //return ko.utils.stringStartsWith(item.name().toLowerCase(), filter);
                 return item.name().toLowerCase().indexOf(filter) !== -1;
            });
        }
    }, self);
      
    
    //a JSON string that we got from the server that wasn't automatically converted to an object
    var JSONdataFromServer = '[{"name":"Peach","category":"Fruits","price":1},{"name":"Plum","category":"Fruits","price":0.75},{"name":"Donut","category":"Bread","price":1.5},{"name":"Milk","category":"Dairy","price":4.50},{"name":"Peach2","category":"Fruits","price":1},{"name":"Plum2","category":"Fruits","price":0.75},{"name":"Donut","category":"Bread","price":1.5},{"name":"Milk2","category":"Dairy","price":4.50},{"name":"Peach3","category":"Fruits","price":1},{"name":"Plum3","category":"Fruits","price":0.75},{"name":"Donut","category":"Bread","price":1.5},{"name":"Milk3","category":"Dairy","price":4.50}]';
    
    //parse into an object
    var dataFromServer =...