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

By | January 12, 2018

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.

<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});

Where you have:


it should read:

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

Leave a Reply

Your email address will not be published. Required fields are marked *