Virtualization scrolling changes date format

[Mary]

Good afternoon, I believe we have a bug in the Rad Grid.

I have the following code to display a grid with a date field formatted a {0:d}. Being in Australia this begins correctly in d/MM/yyyy format, but as soon as you scroll (the scond click does it) the format changes to MM/dd/yyyy (american date format). Setting virtualization to false cures it. Setting the format explicitly cures it, but as we have an international application I don't want to do that. There are no OnScroll events on the page or server that I have added. Any ideas?

 

<telerik:RadGrid ID="dgSessions" runat="server"  AutoGenerateColumns="false"
            AllowSorting="true" GroupingEnabled="false" 
            EnableHeaderContextMenu="true" AllowPaging="true" PageSize="1000" OnNeedDataSource="dgSessions_NeedDataSource">
                
            <MasterTableView TableLayout="Auto">
                <Columns>
                     <telerik:GridDateTimeColumn UniqueName="SessionKey" HeaderText="" DataField="SessionKey" DataFormatString="<a target='_blank' href='SessionDetails.aspx?sessionkey={0}'>View</a>" ReadOnly="True" ShowSortIcon="False" ShowFilterIcon="False">
                    </telerik:GridDateTimeColumn>

 

                    <telerik:GridDateTimeColumn UniqueName="Date" HeaderText="Date" DataField="StartTime" DataFormatString="{0:d}" ReadOnly="True" >
                    </telerik:GridDateTimeColumn>

 

                    <telerik:GridBoundColumn UniqueName="StartTime" HeaderText="Start" DataField="StartTime" DataFormatString="{0:HH:mm}" ReadOnly="True" AllowFiltering="False" ShowSortIcon="False" ShowFilterIcon="False">
                    </telerik:GridBoundColumn>
                   
                </Columns>
            </MasterTableView>
            <ClientSettings ReorderColumnsOnClient="true" AllowColumnsReorder="true" ColumnsReorderMethod="Reorder">
                <Virtualization EnableVirtualization="True" InitiallyCachedItemsCount="20000"
                    LoadingPanelID="RadAjaxLoadingPanel1" ItemsPerView="20"/>
                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                <Resizing AllowColumnResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="False" AllowResizeToFit="True"></Resizing>
                <ClientEvents OnGridCreated="GridCreated" />
            </ClientSettings>
            <PagerStyle Mode="NextPrevNumericAndAdvanced"></PagerStyle>

        </telerik:RadGrid>

[Peter Milchev]

Hello Mary,

Would you please check if using the following workaround fixes the issue?

<script type="text/javascript">
    var original_populateCell = Telerik.Web.UI.Grid.GridHyperLinkColumn.populateCell
    Telerik.Web.UI.Grid.GridHyperLinkColumn.populateCell = function (cell, dataItem) {

        if (!dataItem) {
            return;
        }

        function isInteger(num) {
            return (num ^ 0) === num;
        }

        if (isInteger(dataItem[this._data.DataTextField])) {
            dataItem[this._data.DataTextField] += "";
        } else  if (dataItem[this._data.DataTextField].toString().indexOf("/Date(") != -1)  {
            dataItem[this._data.DataTextField] = new Date(parseInt(dataItem[this._data.DataTextField].replace("/Date(", "").replace(")/", ""), 10));
        }

        original_populateCell.call(this, cell, dataItem);
    }
</script>

Regards,
Peter Milchev
Progress Telerik

[Mary]

No – no difference – tried changing the type to GridDateTimeColumn but that didn’t help either

[Peter Milchev]

Hello Mary,

The initial items that are loaded, they are generated on the server. The other records that are loaded via callbacks by the Virtualization paging, they are rendered with JavaScript. 

Here is the method that renders the DateTime and Bound columns on the client, you can use the code to debug and check the formats at the time the cells are populated. For convenience, attached is a sample runnable project that implements this, with a single DateTime column. 

<script>
    Telerik.Web.UI.Grid.GridBoundColumn.populateCell = function (cell, dataItem, value) {
        debugger
        var grid = this._owner._owner,
            dataFormatString = this._data.DataFormatString;

        if (typeof (dataFormatString) != "undefined" && dataFormatString != "") {
            if (value.toString().indexOf("/Date(") != -1) {
                value = new Date(parseInt(value.replace("/Date(", "").replace(")/", ""), 10));
            }
            cell.innerHTML = String.localeFormat(dataFormatString, value) || " ";
        } else if (value.toString().indexOf("/Date(") != -1) {
            cell.innerHTML = String.localeFormat("{0:" + grid._defaultDateTimeFormat + "}", new Date(parseInt(value.replace("/Date(", "").replace(")/", ""), 10)));
        } else {
            cell.innerHTML = (value !== "") ? value : " ";
        }
    }
</script>

If you still replicate the issue, we would greatly appreciate it if you open an official support ticket where you can attach the modified project and share more details on the cultures of the server and client and the date formats on the server and client, both the actual and the expected. That would allow us to investigate locally and help you more efficiently. 

Once we have a closure in the support ticket, we can share it here for convenience and better visibility from the community.

Regards,
Peter Milchev
Progress Telerik

[Mary]

Didn't get very far with this - the scrolling stopped when it got to page 10 as you can see by the attached screen shots - it stopped on the code shown, but did not display any console error. And if you want people to debug for you, you might not send a project which doesn't run because it is using an expired Trial license.

[Peter Milchev]

Hello Mary,

As this is a public forum thread, providing a fully runnable samples would make the assemblies publicly available. That is why we add trial assemblies which can be obtained without having a license.

The message that you see is added on a random basis and this is the designed behavior of all trial Telerik.Web.UI assemblies. Just refreshing the page fixes it. 

I have provided the trial assemblies for convenience as it makes the project fully runnable. If needed, you can get the licensed assemblies from your installation folder and add them to the bin folder of the attached project. This would prevent the messages from appearing.

Regarding the scrolling behavior, I guess it is because of the "debugger" statement that I have added in the provided script as you can see the debug arrow is visible on your page.



From the screenshots you provided, it seems that you use Visual Studio 2017 which comes with the client-side debugging of both JavaScript and TypeScript in Google Chrome enabled by default. This triggers the debugger of Visual Studio when a debugger statement is hit in the browser, similarly to the previous integration between Visual Studio and Internet Explorer.

I have suggested debugging at a specific place in the code as a possible way to pin down the issue much faster as we are unable to replicate the issue on our side. As an alternative, I have suggested opening an official support ticket where you can attach a runnable project representing the issue. That would allow us to investigate locally and provide a temporary workaround if such is available.  

Regards,
Peter Milchev
Progress Telerik

[Mary]

Peter - i don't have the time to muck around with this - I will set the date format explicitly for now - I suggest you try to replicate the issue with a machine using Australian regional settings