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

kendoDateTimePicker shows strange behavior when it is used as an editor for a column in the kendoGrid.

6 Answers 223 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Eugeny
Top achievements
Rank 1
Eugeny asked on 18 Jul 2012, 08:09 AM
Please help me. I encountered a very strange behavior of the kendoDateTimePicker widget.

When i'm using kendoDateTimePicker widget as editor in kendoGrid, and click on clock icon, this widget show me string "01.01.1900" before time part in drop-down list (see attached picture).

For example:
   ...
"01.01.1900 4:30"  instead of  "4:30"
"01.01.1900 5:00"                    "5:00"

  ...

My source code is:

<div id="grid"></div>
 
<script type="text/javascript">
    $(document).ready(function () {
 
        kendo.culture("ru-RU");
 
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: { url: "http://localhost:6356/admin/GetUnitTogglesList" },
                update: { url: "http://localhost:6356/admin/UpdateUnitToggles" },
                destroy: { url: "http://localhost:6356/admin/DeleteUnitToggles" },
                create: { url: "http://localhost:6356/admin/CreateUnitToggle" }
            },
            batch: true,
            schema: {
                model: {
                    fields: {
                        Date: { type: "date" },
                        UnitId: { type: "number" },
                        Connect: { type: "boolean" }
                    }
                }
            }
        });
 
        dataSource.read();
 
        $("#grid").kendoGrid({
            dataSource: dataSource,
            navigatable: true,
            pageable: false,
            sortable: true,
            toolbar: ["create", "save", "cancel"],
            columns: [
              { field: "Date", title: "Date", template: '#= kendo.toString(Date, "dd.MM.yyyy H:mm") #', editor: timeEditor },
              { field: "UnitId", title: "Unit" },
              { field: "Connect", title: "Status" }
            ],
            editable: true
        });
    });
 
    function timeEditor(container, options) {
        $('<input name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDateTimePicker({
              format: "dd.MM.yyyy H:mm",
              timeFormat: "H:mm"             
            });
    }
</script>

6 Answers, 1 is accepted

Sort by
0
Eugeny
Top achievements
Rank 1
answered on 19 Jul 2012, 11:59 AM
I think this is bug.
It seems, format option used instead of timeFormat (when DateTimePicker use as editor in Grid).
0
Doug
Top achievements
Rank 1
answered on 23 Jul 2012, 06:22 PM
I can confirm this as well.  I agree that it seems the format option is being used in lieu of the timeFormat option when used inside of a grid.  Can a Telerik person confirm this and let us know if there is a workaround?
0
Georgi Krustev
Telerik team
answered on 24 Jul 2012, 11:00 AM
Hello,

 
Thank you for drawing our attention to this issue. We confirm it as a bug, which is already addressed and the fix will be available in the next internal build. For now you will need to override setOptions method of the DateTimePicker:

kendo.ui.DateTimePicker.fn.setOptions =  function (options) {
            var that = this,
                dateViewO = that.dateView.options,
                timeViewO = that.timeView.options;
 
            Widget.fn.setOptions.call(that, options);
            normalize(that.options);
  
            options = that.options;
            extend(dateViewO, options, {
                change: dateViewO.change,
                close: dateViewO.close,
                open: dateViewO.open
            });
 
            extend(timeViewO, options, {
                format: options.timeFormat,
                change: timeViewO.change,
                close: timeViewO.close,
                open: timeViewO.open
            });
 
            that.timeView.ul[0].innerHTML = "";
        };

Please note that you need to override the prototype before DateTimePickers initialization.

Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Eugeny
Top achievements
Rank 1
answered on 24 Jul 2012, 12:33 PM
Thanks for help, Georgi.
But for me, your workaround has solved one problem, but has caused a some others. For example, now, inline editor (DateTimePicker widget) is not closed automatically, when I finish entering value, and move to another field to edit (see attached picture).
0
Georgi Krustev
Telerik team
answered on 26 Jul 2012, 12:08 PM
Hi,

 
The code snippet from my last answer will throw JS exception if it is used outside of the kendo.datetimepicker.js. I modified the code in order to be able to override the function outside of the JS file:

kendo.ui.DateTimePicker.fn.setOptions =  function (options) {
                    var that = this,
                    dateViewO = that.dateView.options,
                    timeViewO = that.timeView.options;
 
                    kendo.ui.Widget.fn.setOptions.call(that, options);
                    var parseFormats = options.parseFormats;
                    kendo.calendar.normalize(options);
                    parseFormats = $.isArray(parseFormats) ? parseFormats : [parseFormats];
                    parseFormats.splice(0, 0, options.format);
                    options.parseFormats = parseFormats;
                    options = that.options;
 
                    $.extend(dateViewO, options, {
                        change: dateViewO.change,
                        close: dateViewO.close,
                        open: dateViewO.open
                    });
 
                    $.extend(timeViewO, options, {
                        format: options.timeFormat,
                        change: timeViewO.change,
                        close: timeViewO.close,
                        open: timeViewO.open
                    });
 
                    that.timeView.ul[0].innerHTML = "";
                }
Here is an image, which shows how to use the code snippet.

Kind regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Eugeny
Top achievements
Rank 1
answered on 01 Aug 2012, 01:24 PM
Thanks for your solution, Georgi. Now all works!
Tags
Date/Time Pickers
Asked by
Eugeny
Top achievements
Rank 1
Answers by
Eugeny
Top achievements
Rank 1
Doug
Top achievements
Rank 1
Georgi Krustev
Telerik team
Share this question
or