JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<input type="text" id="city" value="Reims"/><button>select</button>
<div id="grid"></div>

JavaScript

var grid = $("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: { type: "number" },
                    Freight: { type: "number" },
                    ShipName: { type: "string" },                   
                    ShipCity: { type: "string" }
                }
            }
        },
        pageSize: 10,
        serverPaging: true        
    },
    height: 250,
    selectable: "multiple",
    pageable: true,
    columns: ["OrderID", "Freight", "ShipName", "ShipCity"]
}).data("kendoGrid");
         
$("button").click(function() {
    var value = $("#city").val(),
        view = grid.dataSource.view();
    
    var rows = $.grep(view, function(item) {
        return item.ShipCity === value;
    }).map(function(item) { 
        return grid.tbody.find("[data-uid=" + item.uid + "]");
    });
    
    grid.select(rows);
});