[Solved] Modal window with ajax loaded content

[Iulian]

Hi,
I have a grid for which I want to edit the selected row. For this, I am using a modal window whose content is a partial view loaded using ajax. The problem I have is that none of the view's ajax enabled controls is working. For example, clicking on a dropdownlist should display its dropdown, but it doesn't. Same goes for tab control, clicking on a tab doesn't select it. I know I'm doing something wrong but I can't figure out what.

view (just an excerpt, to exemplify ):

<div>
    <% Html.Telerik().DropDownList().Name("DropDown")
       .DataBinding(dataBinding => dataBinding.Ajax().Select("Home", "GetList")).Render(); %>
</div>

controller action:

public ActionResult OpenEditWindow(int id)
{
    // code to select object
    // ...

    return PartialView("EditWindow", new { /* model */ } );
}

ajax request (coming from Index.aspx):

$('#EditButton').click(function() {
    $.ajax({

        type: 'POST',

        url: '/Home/OpenEditWindow',

        data: { id: 1 },

        dataType: 'html',

        success: function(htmlData) {

           $('#EditWindow').data('tWindow').content(htmlData);

          $('#EditWindow').data('tWindow').center().open();

        }

    })
});

[T. Tsonev]

Hello Iulian,

The JavaScript files required by the components are not registered automatically when you're loading partial views with Ajax. You need to register the scripts manually. Please see this help topic for detailed instructions - Using with partial views loaded via Ajax

Regards,
Tsvetomir Tsonev
the Telerik team

[Iulian]

Thank you Tsvetomir, I only had to register the .js files and now it works :)