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

2 posts, 0 answers
  1. Robert Madrian
    Robert Madrian avatar
    163 posts
    Member since:
    Apr 2003

    Posted 28 Sep Link to this post

    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);
                }
            }
        })
  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1769 posts

    Posted 03 Oct Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top