Control only renders first time in modal

[Paul]

I am using a DatePicker in a Modal to change the dates of various records without reloading the whole page. The Modal is loaded via an Ajax call. The modal contains a form and a single field similar to:

 

@(Html.Kendo().DatePickerFor(x => x.ScheduledDate)
                    .Start(CalendarView.Year)
                    .Depth(CalendarView.Month))
                )

 

This works fine the first time the modal loads but on subsequent calls, the date picker is not rendered and an unstyled textbox is shown instead.

I am guessing that this has something to do with the fact that the page has already handled a control with the same id but because the modal has been replaced with new html, there are no duplicate ids on the page and I want to force kendo to render the picker again on the new control.

 

How do I do this?

[Ivan Danchev]

Hello Paul,

Attached you can find a sample project that demonstrates the described scenario. A modal Window is declared on the Index page. It sends an AJAX call to the controller and loads a partial view that contains a form an the DatePicker bound to the ScheduledDate field of the model. No issue with styling of the DatePicker occurs. On closing the modal and reopening it by clicking on the button, a new AJAX call is sent and the form with the picker is loaded again in the modal.

Give the project a try and let me know in case you have further questions on the configuration of the DatePicker, the Window, or the demonstrated API methods used to open it, close it, and refresh its content.

Regards,
Ivan Danchev
Progress Telerik

[Paul]

Thanks. There was an error with my ajax code that resulted in the parent html structure changing on subsequent calls and this was the issue. I would never have spotted it without your example.