使用角度在 Kendo UI 网格上应用搜索答案

【问题标题】：Apply search on Kendo UI grid with angular使用角度在 Kendo UI 网格上应用搜索
【发布时间】：2014-07-30 18:58:54
【问题描述】：

我在当前的应用程序中使用 KendoUI 和 AngularJS。我想在 KendoUI 网格控件上添加自定义搜索功能。为此，我在剑道网格上方放置了一个文本框。现在我想在按钮点击时应用搜索。您能否建议我如何根据搜索条件重新刷新该 kendoUI 网格数据源并进行过滤。

谢谢拉维·米塔尔

【问题讨论】：

标签： javascript angularjs kendo-ui

【解决方案1】：

我之前实现过类似的功能。我所做的如下：

首先我在网格的工具栏上添加了一个过滤器字段：

$("#gridPortfolio").kendoGrid({
....
toolbar: 
 [
 ...
   {name: "filter", 
    template: "<div> <input class='k-textbox k-space-right' id='FieldFilter' type='text' placeholder='NIT' disabled />\
                   <span class='k-icon k-i-search'></span>\
               </div>" },
 ],
...
});

然后我将组合框上的 keyup 事件绑定到如下函数：

$("#FieldFilter").keyup(function () {
            portfolioGridFilter();
        });

最后我在该函数的网格上修改并应用了过滤器：

portfolioGridFilter: function () {

        var portfolioFilters = new Array();

        var searchText = $("#FieldFilter").val();

        if (searchText.length >= 3) {
            portfolioFilters.push({ field: "Field", operator: "contains", value: searchText });
        }

        if (portfolioFilters.length >= 1) {
            _yourGridsDataSource.filter(portfolioFilters);
        }

        if (searchText.length == 0) {
            _yourGridsDataSource.filter([]);
        }

    },

【讨论】：

好吧，我正在使用带有 KendoUI 的 AngularJS，所以我不能使用该代码示例，但我明白了。谢谢你

【解决方案2】：

这个剑道示例应该让您走上正轨： Grid with Toobar

【讨论】：