KendoUI Search ALL

by vrluckyin India

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
    <div id="grid"></div>
    <div class="toolbar">
        <label class="category-label" for="category">Show products by category:</label>
        <input type="search" id="category" style="width: 230px"/>
        <input id="reset" type="button" value="Reset"/>
        <input id="reset1" type="button" value="ORLOGIC"/>
    </div>
</div>

JavaScript

function onlineFilter()
{
				var val = $('#category').val();
        $("#grid").data("kendoGrid").dataSource.filter({
            logic  : "or",
            filters: [
                {
                    field   : "ProductName",
                    operator: "contains",
                    value   : val
                },
                {
                    field   : "QuantityPerUnit",
                    operator: "contains",
                    value   : val
                }
            ]
        });

}
function offlineFilter()
{
	var val = $('#category').val();
	var data = $("#grid").data("kendoGrid").dataSource.data();
  //console.log(data);
  var query = kendo.data.Query.process(data, {
            logic  : "or",
            filters: [
                {
                    field   : "ProductName",
                    operator: "contains",
                    value   : val
                },
                {
                    field   : "QuantityPerUnit",
                    operator: "contains",
                    value   : val
                }
            ]
        });
	console.log(query.data);
  
  var dsHCPGrid = new kendo.data.DataSource({ data: query.data, pageSize: 10 });
            $('#grid').data('kendoGrid').setDataSource(dsHCPGrid);
            $('#grid').data('kendoGrid').dataSource.read();
            $('#grid').data('kendoGrid').refresh();
}
$(document).ready(function () {

    var grid = $("#grid").kendoGrid({
        dataSource: {
            type           : "odata",
            transport      : {
                read: "http://demos.kendoui.com/service/Northwind.svc/Products"
            },
            pageSize       : 7,
            serverPaging   : true,
            serverSorting  : true,
            serverFiltering: true
        },
        sortable  : true,
        pageable  : true,
        columns   : [
            {
                field: "ProductID",
                width: 100},
            {
                field:...