Different editors in one column (grid.columns[1].editor) not working as expected

[Robert Madrian]

Hello,

I use the following approach to configure custom editing UI for the column: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editor
(see also Code below)

this works for textcolumns but there is a Problem with kendoNumericTextBox, kendoTimePicker and kendoDatePicker.
If I click into the column the corresponding editor displays but after editing the wrong value is given back to the text field - for me it looks like there is a formatting problem with the german language...

in this Video https://www.screencast.com/t/GkXn5uS7SH2 you can see what's going on:

• changing a time value of 12:33.00 results in "Thu Sep 28 2017 02:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)"
• changing a date value of 10.10.1999 results in "Wed Aug 19 1998 00:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)"
• in float/decimal value the decimal seperator is in german a comma not a dot - if I type 124,25 the result is 12425.00

How to set the Editors (kendoNumericTextBox, kendoTimePicker and kendoDatePicker) that they give the correct value back?

 

$(function () {
        var grid = $("#grdMitgliedprofile").data("kendoGrid");
        grid.columns[1].editor = function (container, options) {
            //-----------------------------------------
            //Eintrag_INT
            //-----------------------------------------
            if (options.model.Profilfeldtyp_ID == 1) {
                $("<input name='" + options.field + "' data-bind='value:" + options.field + "'/>").appendTo(container).kendoNumericTextBox({
                    format: "n",
                    decimals: 0
                });
            }
            //-----------------------------------------
            //Eintrag_FLOAT
            //-----------------------------------------
            else if (options.model.Profilfeldtyp_ID == 2) {
                $("<input data-bind='value:" + options.field + "'/>").appendTo(container).kendoNumericTextBox({
                    format: "n",
                    decimals: 2,
                    culture: "de-DE"
                });
            }
            //-----------------------------------------
            //Eintrag_BIT
            //-----------------------------------------
            else if (options.model.Profilfeldtyp_ID == 3) {
                //$("<input type='checkbox' data-bind='value:" + options.field + "' class='k-checkbox'/>").appendTo(container);
                $("<input data-bind='value:" + options.field + "'/>").appendTo(container).kendoDropDownList({
                    dataTextField: "text",
                    dataValueField: "value",
                    dataSource: [
                        { text: "JA", value: "JA" },
                        { text: "NEIN", value: "NEIN" },
                    ],
                });

            }
            //-----------------------------------------
            //Eintrag_VARCHAR
            //-----------------------------------------
            else if (options.model.Profilfeldtyp_ID == 4) {
                $("<textarea data-bind='value:" + options.field + "' class='k-textbox'/>").appendTo(container);
            }
            //-----------------------------------------
            //Eintrag_MONEY
            //-----------------------------------------
            else if (options.model.Profilfeldtyp_ID == 5) {
                $("<input data-bind='value:" + options.field + "'/>").appendTo(container).kendoNumericTextBox({
                    format: "c",
                    decimals: 2,
                    culture: "de-DE"
                });
            }
            //-----------------------------------------
            //Eintrag_TIME
            //-----------------------------------------
            else if (options.model.Profilfeldtyp_ID == 6) {
                $("<input data-bind='value:" + options.field + "'/>").appendTo(container).kendoTimePicker({
                    dateInput: true,
                    format: "HH:mm:ss",
                    parseFormats: ["HH:mm:ss"],
                    culture: "de-DE"
                });
            }
            //-----------------------------------------
            //Eintrag_DATETIME
            //-----------------------------------------
            else if (options.model.Profilfeldtyp_ID == 7) {
                $("<input data-bind='value:" + options.field + "'/>").appendTo(container).kendoDatePicker({
                    dateInput: true,
                    format: "dd.MM.yyyy",
                    culture: "de-DE"
                });
            }
            //-----------------------------------------
            //Eintrag_IMAGE
            //-----------------------------------------
            else if (options.model.Profilfeldtyp_ID == 8) {
                $("<input name='files' id='files' type='file'/>").appendTo(container).kendoUpload({
                    async: {
                        saveUrl: "save",
                        removeUrl: "remove",
                        autoUpload: true
                    }
                });
            }
            else {
                $("<textarea data-bind='value:" + options.field + "' class='k-textbox'/>").appendTo(container);
            }
        }
    })

[Viktor Tachev]

Hi Robert,

The behavior is observed because the type of the field that is bound to the column is string. Thus, when entering a value it will be cast to its string representation. This is why the dates for example are shown in this format - the picker component returns a Date object but it is converted to string.

Have in mind that using different editors in the same column is not a built-in feature. Furthermore, such functionality is not recommended. This implies that the underlying data will be stored as a string. As a result an extensive custom logic will be required for validating and reading the data and parsing it to the correct type. 

In order to take advantage of the built-in features of the components I will strongly recommend modifying the data in a way that each different data type is stored in a separate field. This way, the editing, filtering, sorting, etc. features will work out of the box with no need of complex custom logic.


Regards,
Viktor Tachev
Progress Telerik