or
<!doctype html><html><head id="head" runat="server"> <title></title> <link href="styles/kendo.common.min.css" rel="stylesheet" /> <link href="styles/kendo.default.min.css" rel="stylesheet" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script> <script type="text/javascript"> var ds; $(document).ready(function () { var peopleData = JSON.parse($("#gridData")[0].innerHTML); ds = new kendo.data.DataSource({ data: peopleData, pageSize: 5 }); bindData(); }); function bindData(filter) { if (filter) ds.filter({ field: "SearchableText", operator: "contains", value: filter }); $("#Grid").kendoGrid({ columns: [{ field: "FullName", title: "Name" }, { field: "Phone", title: "Phone" }, { field: "Email", title: "Email" }], dataSource: ds, detailTemplate: kendo.template($("#detailTemplate").html()) }); } function dataSearch(inText) { if (inText.length < 3) bindData(); else bindData(inText.toLowerCase()); } </script> </head><body> <form runat="server"> Search: <input onkeyup="dataSearch(this.value)" type="text" /> <div style="width:400px" id="Grid"></div> <script type="text/x-kendo-template" id="detailTemplate"> #= Details # </script> <div style="display:none" id="gridData" runat="server"> [ {"Phone":"1","Email":"A","Fax":"F","FullName":"Adam","SearchableText":"adam","Details":"det1"}, {"Phone":"1","Email":"A","Fax":"F","FullName":"Bob","SearchableText":"bob","Details":"det2"} ] </div> </form></body></html>