Text box search and filter the values in grid view using Kendo UI HTML5

Question

how can I filter Grid filtering based on values we entered in text box.

I have one text box out side the grid and i want to search the whole grid based on the values i entered in textbox. step1:

<input id="btnSearch" type="button" value="search" />
<div id="grid">

step2:bing grid value from source

var gridResult = $("#grid").kendoGrid({
    dataSource: { data: database },
    scrollable: true,
    sortable: true,
    filterable: true,
    pageable: {
        input: true,
        numeric: false
    },
    columns: [
        {
            field: "id",
            title: "ID"
        },
        {
            field: "x",
            title: "x"
        },
        {
            field: "y"
        },
        {
            field: "z"
        },
        {
            field: "p"
        }
    ]
});

step3: script for text box .that is wat ever the values i have typed in text box if the values match in grid the result should show in grid.

$("#btnSearch").click(function () {
    $filter = new Array();
    $x = $("#txtSearch").val();
    if ($x) {
        $filter.push({ field:"x", operator:"contains", value:$x});
    }
    gridResult.datasource.filter($filter);
});

Answer 1

Where you have:

gridResult.datasource.filter($filter);

it should read:

gridResult.data("kendoGrid").dataSource.filter($filter);

1. the s in dataSource is uppercase
2. you have to add data("kendoGrid") either here or when you declare var gridResult.