Jquery Mobile / Telerik Grid Globalization Error

[Mark Shortt]

Hi

I have an Asp.net MVC 3 project using Telerik MVC and JqueryMobile. My problem is when using the MVC Grid with globalisation. 

I need to enable Globalization to get a couple of date items to bind correctly for inline editing on the grid (if globalisation is not enabled the date fileds do not bind on empty and appear empty, and also if I then set the date and update I get a date format error).

On a view where I'm not using Jquery Mobile this works correctly and the date fields bind correctly. I can also use the grid on a view with Jquery Mobile, but if the globalisation is not turned on the date format is wrong and the fields don't bind on edit. 

I then set globalisation using the following:

@(Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(group => group.Combined(true).Compress(true)))

This works fine if I call my page with the MVC Grid directly e.g. mycontroller/GridPage , but if I then try to call the same action via JqueryMobile dialog I get the following message:

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'load'

The link I use to call via JqueryMobile is:

@Html.ActionLink("My Grid", "GridPage ", "mycontroller", new { data_rel = "dialog", data_theme = "b", data_transition = "flip" })

Removing the Globalization attribute stops the error, but also stops the Globalization

Can anybody advise how I can get past this error?

Thanks

Mark

[Dan]

I also have this issue in MVC4 with normal globalization.  I only get the error when I inject dynamic HTML into the DOM that has Telerik components in it.  I believe jQuery Mobile dialog also injects html into the DOM.  If I turn Globalization off, then everything works fine, except that nothing is localized.  My guess is that there is some bug with Globalization when you try to append to the DOM a second time.  The other controls must assume globalization is not possible or something weird.

[Dan]

Alright, I figured out a work around, although I do not really like it.  I think when we dynamically add HTML to the DOM like this, it wipes out the jQuery.telerik object, leaving behind only CultureInfo.  To get around this, you need to "register" all the telerik controls in the dynamic HTML with/when the original page that was loaded.

For example, if you have a popup with 2 textboxes named txtPrice and txtQuantity, then in any page that can display this popup, you need to declare 2 telerik controls named txtPrice and txtQuantity.  After being declared, you can remove them from the DOM.  When the popup gets added to the DOM, it will see that controls with that name were already defined and everything will work like normal.  It is really a strange error to get considering that everything works fine when Globalization is turned off.