This is a migrated thread and some comments may be shown as answers.

Grid editing / Date picker control / Time formatting

0 Answers 462 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 15 Jun 2012, 08:55 PM
I added a datepicker control to a grid for edit mode. When the updates, it displays a long format time string. I would like to format the time as a short date string, but I have not found the event to delegate. The code below demonstrates the problem:

            <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)
                                    {
                                        var datepicker = e.sender.element.kendoDatePicker()
                                        var d = new Date(datepicker.val());
                                    });

                                }
                            },
                            { filterable: false, command: ["edit"], title: "&nbsp;", width: "210px"}],
                        editable: "inline"
                    });

                });

</script>

Click "Edit", then a date from the datepicker control, then look at the resulting time string in the grid.
Sorry if I posted this in the wrong forum before.

No answers yet. Maybe you can help?

Tags
Grid
Asked by
John
Top achievements
Rank 1
Share this question
or