GridDateTimeColumn, RadDatePickers, and Australian date formats

[Eric]

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?

[Eyup]

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

[Eric]

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.

[Konstantin Dikov]

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

[Eric]

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;
    }
});