GridDateTimeColumn, RadDatePickers, and Australian date formats

5 posts, 0 answers
  1. Eric
    Eric avatar
    6 posts
    Member since:
    Mar 2014

    Posted 31 Aug Link to this post

    version 2013.3.1015.45

    I will try and keep this simple we are working on moving our product into foreign markets. To do so means we need to start supporting dates in different formats. In the test I am working with I am attempting to use GridDateTimeColumn to present editable data in an Australian format (ie. dd/mm/yyyy).
    The Date is displayed correctly, however when you attempt to batch edit the cell by clicking the date the date in the input field of the RadDatePicker.

    In short "31/8/2016" becomes "8/7/2018". Any thoughts?

  2. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 05 Sep Link to this post

    Hi Eric,

    Make sure you are using the latest release version of the controls and try setting the following property:
    <telerik:GridDateTimeColumn ... EditDataFormatString="dd/MM/yyyy">

    Alternatively, you can access the generated RadNumericTextBox control manually and apply any desired settings:
    http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/rows/accessing-cells-and-rows#accessing-controls-in-batch-edit-mode

    Regards,
    Eyup
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Eric
    Eric avatar
    6 posts
    Member since:
    Mar 2014

    Posted 12 Sep Link to this post

    Due to internal product restrictions we are unable to update our Telerik beyond the version specified.

    As for implementation using the EditDateFormatString attribute is also undesirable as we are passing in the format string from the Current Culture specified by .NET. I have attempted to set the Culture, DateFormat, and DisplayDateFormat from the RadNumericTextBox control but unable to get a desired result in both EN-US and EN-AU. There seems to be a disconnect between the DatePicker itself (which appears to be working correctly) and the input field that displays the date.

  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 15 Sep Link to this post

    Hello Eric,

    Can you please ensure that you are setting the UICulture and Culture to the same culture. You can test adding the following in the page's directive:
    <%@ Page Language="C#" Culture="en-AU" UICulture="en-AU"

    And for the GridDateTimeColumn you can use the following:
    <telerik:GridDateTimeColumn DataField="DateField" DataFormatString="{0:d}"></telerik:GridDateTimeColumn>

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  6. Eric
    Eric avatar
    6 posts
    Member since:
    Mar 2014

    Posted 15 Sep Link to this post

    Well we found a solution. Essentially the datePicker set_value use "new Date(text)" which doesn't play nice with different locals. To fix it we had to override the Telerik.Web.UI.GridBatchEditing._getSetControlValue to use date parts and reconstruct the date that way.

     

    Hope our solution helps someone else.

    Code:

    $(function () {
        // wrap method to disable editor on non-editor clicks
        var T = Telerik.Web.UI,
            batchEditing = T.GridBatchEditing.prototype
            ;
     
        // telerik grid bug - datePicker set_value use "new Date(text)" which doesn't play nice with different locals
        batchEditing._getSetControlValue = function (m, C) {
            var B = this, x = B._isDomElement(m), q = x ? m : m.get_element ? m.get_element() : m, z = arguments.length >= 2, A = Telerik.Web.UI, v = z ? B._raiseGetSetValueEvent("batchEditSetEditorValue", q, C, z) : B._raiseGetSetValueEvent("batchEditGetEditorValue", q, C, z);
            if (v.get_cancel()) {
                return v.get_value();
            }
            if (x) {
                return B._getSetElementValue(m, C, z);
            } else {
                if (A.RadInputControl && A.RadInputControl.isInstanceOfType(m)) {
                    if (z) {
                        m.set_value(C);
                    }
                    return m.get_valueAsString();
                } else {
                    if ((A.RadDatePicker && A.RadDatePicker.isInstanceOfType(m)) || (A.RadMonthYearPicker && A.RadMonthYearPicker.isInstanceOfType(m))) {
                        var p = m.get_dateInput(), o = p.get_dateFormat();
     
                        if (z) {
                            // convert to supported format
                            var parts = DateFieldControl.getDateStringParts(C, o.toLowerCase());
                            var n = new Date(parts.year + '/' + parts.month + '/' + parts.day);
     
                            if (!isNaN(n.getTime())) {
                                m.set_selectedDate(n);
                            } else {
                                p.set_value(C);
                            }
                        }
                        if (B._currentlyEditedCellInfo && B._currentlyEditedCellInfo.column._data.DataFormatString) {
                            o = B._currentlyEditedCellInfo.column._data.DataFormatString;
                            o = o.substring(o.indexOf("{0:") + 3, o.indexOf("}"));
                        }
                        return p.get_dateFormatInfo().FormatDate(m.get_selectedDate(), o);
                    } else {
                        if (A.RadComboBox && A.RadComboBox.isInstanceOfType(m) || A.RadDropDownList && A.RadDropDownList.isInstanceOfType(m)) {
                            if (z) {
                                var y = m.findItemByText(C);
                                if (y) {
                                    y.select();
                                    return m.get_selectedItem() ? m.get_selectedItem().get_value() : m.get_text();
                                } else {
                                    if (m.set_text && m.get_text) {
                                        m.set_text(C);
                                        return m.get_text();
                                    }
                                }
                                return null;
                            }
                            return m.get_selectedItem() ? m.get_selectedItem().get_text() : m.get_text ? m.get_text() : "";
                        } else {
                            if (A.RadAutoCompleteBox && A.RadAutoCompleteBox.isInstanceOfType(m)) {
                                if (z) {
                                    var u = C.split(m.get_delimiter()), r = m.get_entries(), t, s;
                                    r.clear();
                                    for (var w = 0; w < u.length; w++) {
                                        t = u[w].trim();
                                        if (t) {
                                            s = new A.AutoCompleteBoxEntry();
                                            s.set_text(t);
                                            r.add(s);
                                        }
                                    }
                                }
                                return m.get_text();
                            } else {
                                if (A.RadEditor && A.RadEditor.isInstanceOfType(m)) {
                                    if (z) {
                                        m.onParentNodeChanged();
                                        m.set_html(C);
                                    }
                                    return m.get_text();
                                } else {
                                    if (A.RadAsyncUpload && A.RadAsyncUpload.isInstanceOfType(m)) {
                                        if (!m._haveRegisteredEvents) {
                                            m._haveRegisteredEvents = true;
                                            m.add_fileSelected(function (E, D) {
                                                B._onAsyncUploadFileUploaded(E, D);
                                            });
                                        }
                                        if (z) {
                                            B._showFileName(m, C);
                                        }
                                        return B._getCurrentFileName(m);
                                    } else {
                                        if (m.get_value && m.set_value) {
                                            if (z) {
                                                m.set_value(C);
                                            }
                                            return m.get_value();
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            return null;
        }
    });

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017