15 Jun 2012
(Link to this post)
I created a datepicker column in the grid for edit mode. It works, but when the grid gets the date from the datepicker, the time string is in long format. I would like to be able to change this to a short date, but I have not been able to determine how to intercept the update. Past the code below into a page to see what happens. How can I change the date format in the grid to show a short date after editing? Thanks.
<div id="grid"></div>
<script language="javascript" type="text/javascript" >
$(document).ready(function ()
{
$("#grid").kendoGrid({
dataSource:
{
data:
[
{Employee:"Joe Jones",Dept:"Sales",Job:"Account manager",DateVal:"1/2/2012"},
{Employee:"Samantha Smith",Dept:"Marketing",Job:"Design",DateVal:"2/3/2012"}
]
},
pageable: true,
height: 455,
filterable: true,
sortable: true,
scrollable: { virtual: false },
selectable: 'row',
columns: [
{ field: "Employee", title: "Employee" },
{ field: "Dept", title: "Department" },
{ field: "Job", title: "Job" },
{
field: "DateVal",
title: "Date Hired",
editor: function (container, options)
{
$('<input id=\"' + options.field + '\" />').appendTo(container)
.kendoDatePicker({ format: "MM/dd/yyyy" });
var datePicker = $("#DateVal").data("kendoDatePicker");
// bind to the close event
datePicker.bind('close', function (e)
{
// See what the datepicker is returning:
var datepicker = e.sender.element.kendoDatePicker()
var d = new Date(datepicker.val());
});
}
},
{ filterable: false, command: ["edit"], title: " ", width: "210px"}],
editable: "inline"
});
});
</script>