Jquery Mobile / Telerik Globalization Error

Question

I have an Asp.net MVC 3 project using Telerik MVC and JqueryMobile. To enable Globalization to work properly for items such as the MVC Grid I enable Globalization using the following in the master layout page:

@(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 eg 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

Answer 1

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.