How to set width for date filter on kendo grid? - kendo-ui

Question

I have a grid with filter row as this examble:
http://demos.telerik.com/kendo-ui/grid/filter-row
Because my grid have many columns, so i must to set width of input filter, i used filterable template to do that:
{
field: "CustomerName",
title: "CustomerName",
filterable: {
cell: {
template: function (input) {
input.width("60%");
input.keydown(preventPost);
}
}
}
},
And on date columns:
{
field: "DueDate",
title: "Modified",
format: "{0:MM-dd-yyyy}",
filterable: {
cell: {
template: function (input) {
input.width("60%");
input.keydown(preventPost);
}
}
}
},
It ok with number and string columns, but date columns occur problem.
Before i set width for columns, it show datepicker on date columns.
After i set width for columns, it show textbox on date columns.
So how to resolve it?

Answer 1

Simply define the width of the column and let Kendo UI compute it.
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}",
width: 150
}
Check the following code that is the example that you refer to in your post.
$(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
}
]
});
});
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
<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>