文本框使用Kendo UI HTML5搜索并过滤网格视图中的值

时间:2012-12-07 05:18:53

标签: html5 kendo-ui

如何根据我们在文本框中输入的值过滤网格过滤。

我在网格旁边有一个文本框,我想根据我在文本框中输入的值搜索整个网格。 步骤1:

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

第二步:从源头中获取网格值

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

第3步:文本框的脚本。如果值在网格中匹配,则我在文本框中键入的值是结果应显示在网格中。

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

1 个答案:

答案 0 :(得分:11)

你在哪里:

gridResult.datasource.filter($filter);

应该是:

gridResult.data("kendoGrid").dataSource.filter($filter);
  1. dataSource中的 s 为大写
  2. 您必须在此处或在声明data("kendoGrid")时添加var gridResult