This is a migrated thread and some comments may be shown as answers.

[Solved] Telerik DropDownList inside of jQuery UI Dialog

6 Answers 88 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Dmitriy asked on 22 Nov 2010, 08:35 PM

Hello, there.
I have the following scenario.

Partial view: Edit.ascx

<% Html.Telerik().DropDownList().Name("TelDropDown2").Items(items =>

{

items.Add().Text("Item 1").Value("val1");

items.Add().Text("Item 2").Value("val2");

}).Render(); %>

View: Page.aspx

<input type="button" id="OpenWindow" value="Edit" />



Site.Master:


<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => 

                                                 group.Combined(false)

                                                      .Compress(false)

                                                      .Add("jquery-ui-1.8.6.custom.min.js")

                                                      .Add("Common.js"))

                                   .OnDocumentReady("Common.Init()")

                                   .Render(); %>



And finally, Common.js:


var Common = function () {
    return {
        Init: function () {     
        
            $('#JqUiDialog').dialog({
                autoOpen: false,
                modal: true,
                width: 300,
                height: 280
            });


            $('#OpenWindow').bind('click', function () {
                $.ajax({
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    url: '/Home/Edit',
                    data: {},
                    dataType: 'html',
                    success: function (result) {
                        $('#JqUiDialog').html(result);
                        $('#JqUiDialog').dialog('open');
                    },
                    error: function (xhr) {
                        //...
                    }
                });
            });

    };

} (); 



So, when I click the button, an AJAX call is being made to the controller's Edit action.  The action returns partial view Edit.ascx.  Inside of Edit.ascx, I'm creating a Telerik DropDownList.  The javascript callback function sets the jQuery UI dialog content to whatever it receives from the controller.  In the opened dialog, the Telerik DropDownList renders fine, however, it does not get any Telerik javascript handlers such as "click".  Moreover, the tData expando attribute isn't set either.  I haven't tried it, but I'm pretty sure the same is true for any Telerik control rendered in the same way.  How can I make it work?



Thank you.

[Solved] Telerik DropDownList inside of jQuery UI Dialog

6 Answers, 1 is accepted