Question

I have several Telerik’s DropDownList controls which are rendered inside jQuery dialog

It is a “single page” ASP>NET MVC application, so I have a grid with records, each time user double clicks the grid program shows jQuery dialog which uses Ajax call to controller that renders partial view for this dialog window and all Telerik controls are binded to model properties.

When I call jQuery dialog first time, all works fine

When I call jQuery dialog second time, dialog opens, binding to model happens nice, but all DropDownList controls appeared to be disabled. I tried to call enable() from jScript – it doesnt helps.

The same problem happens with DatePicker controls, though in DatePicker I can edit date manually (inside a text area) but not able to show calendar selector

So it seems that after 2nd call of jQuery dialog Telerik MVC controls which are inside this dialog loose a capability to display any popup divs (Telerik’s DropDownList and DatePicker are similar that they need to show floating DIV with a list of items or a calandar when you click on the arrow or calendard icon) but manual edit of text in editable areas still works.

The problem seems to be very similar to http://www.telerik.com/community/forums/aspnet-ajax/editor/radeditor-and-jquery-dialog.aspx where it is proposed to use onParentNodeChanged() after the dialog(‘open’) method. However onParentNodeChanged doesnt exists in Telerik ASP.NET MVC Extnetions, it is part of Telerik Rad (ASP.NET AJAX) controls, I cannot call it from jScript

ANy ideas?

Answer 1

I have a similar problem when adding partial views with ajax. When I load view, controls seem to load properly, but they are not attached to telerik scripts, so I need to trigger them after rendering. Code example below:

//Action AddItem returns partial view which contains some standard inputs and telerik    date pickers
@Html.ActionLink("Add item", "AddItem", null, new { @class = "addNewItem" })

<div id=itemRows></div>

<script>
$(".addNewItem").click(function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) {
            $("#itemRows").append(html);
        }
    });
    //I need to trigger all the datepickers to enable them (so I give datepicker class dateTime)
    $(".dateTime").tDatePicker({ format: 'd.M.yyyy' });
    return false;
});
</script>

Try with datepicker, to see if it works, the same logic should work on dropdowns.