Kendo UI网格行过滤器移动过滤器操作员图标位置

时间:2015-03-10 14:24:20

标签: css kendo-ui telerik kendo-grid

我有一个带有行过滤器的非常小的列的网格,这使得它们具有非常小的文本框。所以我用了

field: "OrderID",
   width: 100,
filterable: {
   cell: {
      inputWidth: 65
   }
}

但是当我定义inputWidth以放大文本字段时,过滤器操作符不会移动,实际上会覆盖文本框的部分空间。因此,我想知道是否有一种方法可以将过滤器操作符移动到或最好移到标题标题,如columnMenu过滤器图标。非常感谢任何帮助,谢谢。

我从以下示例中获取了以下示例:http://demos.telerik.com/kendo-ui/grid/filter-row

并修改了orderID的宽度和输入宽度

<div id="example">
            <div id="grid"></div>
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read:"http://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,
                            serverFiltering: true,
                        },
                        height: 550,
                        filterable: {
                            mode: "row"
                        },
                        pageable: true,
                        columns: 
                        [{
                            field: "OrderID",
                            width: 100,
                            filterable: {
                                cell: {
                                   inputWidth: 65
                                }
                            }
                        },
                        {
                            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}"
                        }]
                    });
                });

0 个答案:

没有答案