This question is locked. New answers and comments are not allowed.
Hello,
I'm trying to implement a [grid/pop-up detail] u.i. model using mvc3/Razor and Telerik 2011.1.315 mvc controls. The pop-up window should load any Partial View specified in corresponding Controller method, which it successfully accomplish.
Problem that I'm having is that in the pop-up window any Telerik controls are loaded (with data in) but not functional(for example a drop down does not drop nor autocomplete), together with the validations.
As per my current status, I have observed that javascript files for controls like [telerik.list.min.js] etc are not loaded.
In Firebug error is (for drop down):
I have added this script group to my Partial View file, which loads the files correctly for normal GET calls but is ignored on Ajax call:
In grid I'm using this kind of declaration to create the link for opening the modal pop-up:
Pop-up window is defined with jquery as follows, and included for now in _Layout.cshtml header:
Any help or ideas are greatly appreciated.
Thank you!
I'm trying to implement a [grid/pop-up detail] u.i. model using mvc3/Razor and Telerik 2011.1.315 mvc controls. The pop-up window should load any Partial View specified in corresponding Controller method, which it successfully accomplish.
Problem that I'm having is that in the pop-up window any Telerik controls are loaded (with data in) but not functional(for example a drop down does not drop nor autocomplete), together with the validations.
As per my current status, I have observed that javascript files for controls like [telerik.list.min.js] etc are not loaded.
In Firebug error is (for drop down):
[Uncaught exception: TypeError: 'jQuery('#ParentCategoryId').tComboBox' is not a function]@{Html.Telerik().ScriptRegistrar().Scripts(s => s.AddGroup("UIAndValidationGroup", group => group .Add("telerik.list.min.js") .Add("jquery.validate.min.js") .Add("jquery.validate.unobtrusive.min.js") .Combined(false).Compress(false)));}Html.ActionLink("Open", "Edit", "Categories", new { id = t.Id}, new { @class = "openDialog", data_dialog_id = "editCategoryDialog", data_dialog_title = "Edit Category" })<script type="text/javascript"> $.ajaxSetup({ cache: false }); $(document).ready(function () { $('.openDialog').live('click', function (e) { e.preventDefault(); $('<div id="dlg"></div>') .addClass('dialog') .attr('id', $(this) .attr('data-dialog-id')) .appendTo("body") .dialog({ title: $(this).attr('data-dialog-title'), close: function () { $(this).remove() }, modal: true, closeOnEscape: true, minWidth: 400, buttons: { 'Close': function () { $(this).dialog('close'); } } }) .load(this.href); }); $('.close').live('click', function (e) { e.preventDefault(); $(this).closest('.dialog').dialog('close'); }); }); </script>Any help or ideas are greatly appreciated.
Thank you!