如何在剑道网格上设置日期过滤器的宽度？

Question

我有一个带过滤行的网格，可以这样检查：

http://demos.telerik.com/kendo-ui/grid/filter-row

因为我的网格有很多列，所以我必须设置输入过滤器的宽度，我使用可过滤模板来做到这一点：

{ 
    field: "CustomerName",
    title: "CustomerName",
    filterable: { 
        cell: { 
            template: function (input) { 
                input.width("60%"); 
                input.keydown(preventPost); 
            }
        }
    }
},

在日期栏目中：

{
    field: "DueDate", 
    title: "Modified", 
    format: "{0:MM-dd-yyyy}", 
    filterable: { 
        cell: { 
            template: function (input) { 
                input.width("60%"); 
                input.keydown(preventPost);
            }
        }
    }
},

数字和字符串列没问题，但日期列出现问题。

在我为列设置宽度之前，它会在日期列上显示datepicker。

在为列设置宽度后，它会在日期列上显示文本框。

那么如何解决呢？

Answer 1

只需定义列的宽度，让Kendo UI计算它。

{
    field: "OrderDate",
    title: "Order Date",
    format: "{0:MM/dd/yyyy}",
    width: 150
}

检查以下代码，这是您在帖子中引用的示例。

＆＃13;

＆＃13;

$(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: 125,
        filterable: {
          cell: {
            showOperators: false
          }
        }
      },
      {
        field: "ShipName",
        width: 200,
        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}",
        width: 180
      }
    ]
  });
});

＆＃13;

html { 
  font-size: 12px; 
  font-family: Arial, Helvetica, sans-serif; 
}

＆＃13;

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<div id="grid"></div>

＆＃13;

＆＃13;

＆＃13;