无法过滤kendo-grid

时间:2015-09-02 21:36:31

标签: angularjs kendo-ui kendo-grid

我是Kendo-grid的新手。下面的代码无法过滤出第二个出现的单词:如果我开始输入" Vins"在文本框中,它正确地预测并显示了这个" Vins et alcools Chevalier"在下拉菜单中如果我输入像" et"," alcools" ......它没有预测,也没有显示在下拉列表中。

来源:http://dojo.telerik.com/UFozA

 <!DOCTYPE html>
    <html>
    <head>
        <base href="http://demos.telerik.com/kendo-ui/grid/filter-row">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />

        <script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
    </head>
    <body>

            <div id="example">
                <div id="grid"></div>
                <script>
                    $(document).ready(function() {
                        $("#grid").kendoGrid({
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                                },
                                schema: {
                                    model: {
                                        fields: {
                                            OrderID: { type: "number" },
                                            Freight: { type: "number" },
                                            ShipName: { type: "string" },
                                            OrderDate: { type: "date" },
                                            ShipCity: { type: "string" }
                                        }
                                    }
                                },
                                pageSize: 20,
                                serverPaging: true,
                                //filter: "contains",
                                serverFiltering: true,
                            },
                            height: 550,
                            filterable: {
                                mode: "row"
                            },
                            pageable: true,
                            filter: "contains",
                            columns: 
                            [{
                                field: "OrderID",
                                width: 225,
                                filterable: {
                                   cell: {
                                      showOperators: false
                                   }
                                } 
                            },
                            {
                                field: "ShipName",
                                width: 500,
                                title: "Ship Name",
                                filterable: {
                                    cell: {
                                        operator: "contains"
                                    }
                                }
                            },{
                                field: "Freight",
                                width: 255,
                                filterable: {
                                    cell: {
                                        operator: "gte"
                                    }
                                }
                            },{
                                field: "OrderDate",
                                title: "Order Date",
                                format: "{0:MM/dd/yyyy}"
                            }]
                        });
                    });
                </script>
            </div>


    </body>
    </html>

1 个答案:

答案 0 :(得分:1)

试试这个:http://dojo.telerik.com/@smagistri/UGerE

您实际上需要添加:

cell: {
         template: function (container) {
      container.element.kendoAutoComplete({
          filter: "contains",
          //autoBind: false,
          dataTextField: "ShipName",
          dataValueField: "ShipName",
          valuePrimitive: true,
          dataSource: container.dataSource
      });
    },
    showOperators: false
}