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

RadDateTimePicker in PartialView - JavaScript error

7 Answers 289 Views
UI for ASP.NET AJAX in ASP.NET MVC
This is a migrated thread and some comments may be shown as answers.
John Brahy
Top achievements
Rank 1
John Brahy asked on 03 Jun 2009, 05:38 PM
Hi, I'm getting a javascript error when I put a RadDateTimePicker in to a PartialView.  I can't seem to get the calendar or time to pop-up.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.21022; .NET CLR 3.5.30729; .NET CLR 3.0.30618; Zune 3.0)
Timestamp: Wed, 3 Jun 2009 17:40:36 UTC


Message: Expected ':'
Line: 204
Char: 6375
Code: 0
URI: http://localhost:63299/MediaBar/Edit/11

If I keep it out of of partial view, it seems to work fine.  Here is the code of the partial view:

<%@ Control Language="C#" Inherits="MvcContrib.FluentHtml.ModelViewUserControl<IReleaseRetireable>" %>
<%@ Import Namespace="Company.Project.Data.Entities"%>
<%@ Import Namespace="Telerik.Web.UI.Editor.DialogControls"%>
<%@ Import Namespace="MvcContrib.FluentHtml"%>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

<%
    ReleaseDatePicker.DbSelectedDate = Model.ReleaseDate;
    RetireDatePicker.DbSelectedDate = Model.RetireDate;
%>
<fieldset>
    <legend>Release/Retire Dates</legend>
    <p>
        <label for="ReleaseDate">Release Date:</label>
        <telerik:RadDateTimePicker ID="ReleaseDatePicker" EnableViewState="false"
            runat="server" />
        <%= this.ValidationMessage(m => m.ReleaseDate)%>
    </p>
    <p>
        <label for="RetireDate">Retire Date:</label>
        <telerik:RadDateTimePicker ID="RetireDatePicker" EnableViewState="false"
            runat="server" />
        <%= this.ValidationMessage(m => m.RetireDate)%>
    </p>
</fieldset>

Here is the rendered javascript in question:

<script type="text/javascript">
//<![CDATA[
    Sys.Application.add_init(function(){$create(Telerik.Web.UI.RadTreeView, {"_scrollPosition":0,"_selectedValue":"","_skin":"Default","_uniqueId":"ctl00$rtvAdminSiteMap","clientStateFieldID":"ctl00_rtvAdminSiteMap_ClientState","collapseAnimation":"{\"duration\":200}","expandAnimation":"{\"duration\":200}","nodeData":[{"value":"Home Page","items":[{"value":"Media Bar","toolTip":"Media Bar"}],"toolTip":"Home Page"},{"value":"About Us","items":[{"value":"Sales Team","toolTip":"Sales Team"},{"value":"Careers","toolTip":"Careers"},{"value":"News and Press","toolTip":"News and Press"}],"toolTip":"About Us"},{"value":"Resources","items":[{"value":"Glossary","toolTip":"Glossary"},{"value":"Frequently Asked Questions","items":[{"value":"General","toolTip":"General"},{"value":"Metal","toolTip":"Metal"}],"toolTip":"Frequently Asked Questions"},{"value":"Product Literature","items":[{"value":"General Use","toolTip":"General Use"},{"value":"Specific Products","toolTip":"Specific Products"},{"value":"Reference Charts","toolTip":"Reference Charts"}],"toolTip":"Product Literature"}],"toolTip":"Resources"},{"value":"IMS In Use","items":[{"value":"User Stories","toolTip":"User Stories"}],"toolTip":"IMS In Use"},{"value":"Locations","items":[{"value":"Locations","toolTip":"Locations"}],"toolTip":"Locations"},{"value":"Resources","items":[{"value":"Support","toolTip":"Support"}],"toolTip":"Resources"}]}, null, null, $get("ctl00_rtvAdminSiteMap"));$create(Telerik.Web.UI.RadDialogOpener, {"_dialogDefinitions":{"FlashManager":{"SerializedParameters":"CzFKDgJaCx8WEUVNLGM0VARzBAQ4PkdQMDE3UwgPTnR5BSg1PRBqbGQGEi12KwgzEAkXJQUtITgkE2d5NHA8WgVINSAUOAZYHy4gUQoyTgdzFSs5OhAVbX8pJCN7Kj1ADQhSLD8zISEREVVBOXI0agFzKRsgT1MHCDU8JQczUklwEBU4ExN5TGQXIxxsODlODxtwETwzGxsnEWsHAW0rXjZsG0YvLkhGHiA0Fj8efGR4czgJCjoZSHAFOxNyFy4jPDdNGjI+EwAlExhiMU5XYzJKE0EjTGVeBlQNFTpXTn18cAooCj1mD0tiNDNsKRwVCAgWWylbH0MWEXtOAkggXjJjPR8XOgZfMVcGCjojTUB4LiQzPGV5SGQQGgZAKBQ+CjdCESssAA0hPXtfNhU8VzlOGxwQFkcCAjJ0VQg8aEBIcSQrChBqC0gbLxh3NDJIBw9RFSotOQMTLHtgMhU8ZDVJZAQsK2ZJAQ0SOD8PQUt+Fjg3CBIZbng4UyVzEjpPC218DTJZAAAWZUl5NhYORTVOG0MXTGlpHzMgDgswGgplcjAsPRB6QkgEER5zOxQRPxsfDDQsHxoTARhHBGIKWwJNZDIUKnlCMFQgNzs8aF9+LiQ0BQRUfHAEGhF7Lw8OERp8KjAFBxYlE11AOX0NHDdiIS8mJWlmBDEwUwsITmBJBDAIEA9AdkhiKBx2KhxNOTBJFTIFEx4QOmcCOU8sGQVPKQUiE3FrBSNxFAgiTnROFQ4YBRBUUUhiKBx2KhxNOTBWVwJZLSAgZ3dNN0kOZgNjF0I7K1dQBFYoUwgIfEFJcw4HCDpUUUs4Vxx4FjFJEgkXEzczLScnLH8DNGIWfwQUYAc7NU9+B1UgDAswZGRJcTAJCTlAWn8XJFp2EBAuEBtoFjQFBzojZmdlOmMCZgMWFy8hFkdQBSE8NAcOYANIBCgxEh9EdUg4OB92KhwvEGwfJzQ/AzgkZl1YNHEsfy1lbEo=","Width":"694px","Height":"440px","ClientCallbackFunction":"FlashManagerFunction"}},"_dialogUniqueID":"17422250-6ccd-45a3-bebd-3eeee11bc90d","additionalQueryString":"","clientStateFieldID":"ctl00_MainContent_FlashManagerDialogOpener_ClientState","handlerUrl":"../../Telerik.Web.UI.DialogHandler.axd","skin":"Default"}, null, null, $get("ctl00_MainContent_FlashManagerDialogOpener"));$create(Telerik.Web.UI.RadWindow, {"clientStateFieldID":"ctl00_MainContent_FlashManagerDialogOpener_Window_ClientState","iconUrl":"","left":"","minimizeIconUrl":"","name":"FlashManagerDialogOpener_Window","navigateUrl":"","showContentDuringLoad":false,"skin":"Default","top":""}, null, null, $get("ctl00_MainContent_FlashManagerDialogOpener_Window"));$create(Telerik.Web.UI.RadDateTimePicker, {"_PopupButtonSettings":{  ResolvedImageUrl : "", ResolvedHoverImageUrl : ""},"_TimePopupButtonSettings":{  ResolvedImageUrl : "", ResolvedHoverImageUrl : ""},"_popupControlID":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker_popupButton","_timePopupControlID":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker_timePopupLink","clientStateFieldID":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker_ClientState","focusedDate":"2009-06-03-00-00-00"}, null, {"calendar":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker_calendar","dateInput":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker_dateInput","timeView":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker_timeView"}, $get("d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker"));$create(Telerik.Web.UI.RadDateInput, {"_enableOldBoxModel":false,"_focused":false,"_originalValue":"","_postBackEventReferenceScript":"__doPostBack(\u0027d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9$ReleaseDatePicker\u0027,\u0027\u0027)","_shouldResetWidthInPixels":true,"clientStateFieldID":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker_dateInput_ClientState","dateFormat":"M/d/yyyy h:mm tt","dateFormatInfo":{"DayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"MonthNames":["January","February","March","April","May","June","July","August","September","October","November","December",""],"AbbreviatedDayNames":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"AbbreviatedMonthNames":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",""],"AMDesignator":"AM","PMDesignator":"PM","DateSeparator":"/","TimeSeparator":":","FirstDayOfWeek":0,"DateSlots":{"Month":0,"Year":2,"Day":1},"ShortYearCenturyEnd":2029,"TimeInputOnly":false},"displayDateFormat":"M/d/yyyy h:mm tt","enabled":true,"incrementSettings":{InterceptArrowKeys:true,InterceptMouseWheel:true,Step:1},"styles":{HoveredStyle: ["width:100%;", "riTextBox riHover"],InvalidStyle: ["width:100%;", "riTextBox riError"],DisabledStyle: ["width:100%;", "riTextBox riDisabled"],FocusedStyle: ["width:100%;", "riTextBox riFocused"],EmptyMessageStyle: ["width:100%;", "riTextBox riEmpty"],ReadOnlyStyle: ["width:100%;", "riTextBox riRead"],EnabledStyle: ["width:100%;", "riTextBox riEnabled"]}}, null, null, $get("d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker_dateInput"));$create(Telerik.Web.UI.RadCalendar, {"_DayRenderChangedDays":{},"_FormatInfoArray":[["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],["January","February","March","April","May","June","July","August","September","October","November","December",],["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",],"dddd, MMMM dd, yyyy h:mm:ss tt","dddd, MMMM dd, yyyy","h:mm:ss tt","MMMM dd","ddd, dd MMM yyyy HH\':\'mm\':\'ss \'GMT\'","M/d/yyyy","h:mm tt","yyyy\'-\'MM\'-\'dd\'T\'HH\':\'mm\':\'ss","yyyy\'-\'MM\'-\'dd HH\':\'mm\':\'ss\'Z\'","MMMM, yyyy","AM","PM","/",":",0],"_ViewRepeatableDays":{},"_ViewsHash":{d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker_calendar_Top : [[2009,6,1], 1]},"_calendarWeekRule":0,"_culture":"en-US","_enableViewSelector":false,"_firstDayOfWeek":7,"_postBackCall":"__doPostBack(\u0027d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9$ReleaseDatePicker$calendar\u0027,\u0027@@\u0027)","clientStateFieldID":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker_calendar_ClientState","enabled":true,"monthYearNavigationSettings":["Today","OK","Cancel","Date is out of range.","False"],"skin":"Default","specialDaysArray":[],"stylesHash":{DayStyle: ["", ""],CalendarTableStyle: ["", "rcMainTable"],OtherMonthDayStyle: ["", "rcOtherMonth"],TitleStyle: ["", ""],SelectedDayStyle: ["", "rcSelected"],SelectorStyle: ["", ""],DisabledDayStyle: ["", "rcDisabled"],OutOfRangeDayStyle: ["", "rcOutOfRange"],WeekendDayStyle: ["", "rcWeekend"],DayOverStyle: ["", "rcHover"],FastNavigationStyle: ["", "RadCalendarMonthView RadCalendarMonthView_Default"],ViewSelectorStyle: ["", "rcViewSel"]},"useColumnHeadersAsSelectors":false,"useRowHeadersAsSelectors":false}, null, null, $get("d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker_calendar"));$create(Telerik.Web.UI.RadTimeView, {"_ItemsCount":24,"_OwnerDatePickerID":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker","_TimeOverStyleCss":"rcHover","_culture":"en-US","_timeFormat":"t","clientStateFieldID":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker_timeView_ClientState","itemStyles":{TimeStyle: ["", ""],AlternatingTimeStyle: ["", ""],HeaderStyle: ["", "rcHeader"],FooterStyle: ["", "rcFooter"],TimeOverStyle: ["", "rcHover"]}}, null, null, $get("d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_ReleaseDatePicker_timeView"));$create(Telerik.Web.UI.RadDateTimePicker, {"_PopupButtonSettings":{  ResolvedImageUrl : "", ResolvedHoverImageUrl : ""},"_TimePopupButtonSettings":{  ResolvedImageUrl : "", ResolvedHoverImageUrl : ""},"_popupControlID":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker_popupButton","_timePopupControlID":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker_timePopupLink","clientStateFieldID":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker_ClientState","focusedDate":"2009-06-03-00-00-00"}, null, {"calendar":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker_calendar","dateInput":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker_dateInput","timeView":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker_timeView"}, $get("d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker"));$create(Telerik.Web.UI.RadDateInput, {"_enableOldBoxModel":false,"_focused":false,"_originalValue":"","_postBackEventReferenceScript":"__doPostBack(\u0027d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9$RetireDatePicker\u0027,\u0027\u0027)","_shouldResetWidthInPixels":true,"clientStateFieldID":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker_dateInput_ClientState","dateFormat":"M/d/yyyy h:mm tt","dateFormatInfo":{"DayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"MonthNames":["January","February","March","April","May","June","July","August","September","October","November","December",""],"AbbreviatedDayNames":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"AbbreviatedMonthNames":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",""],"AMDesignator":"AM","PMDesignator":"PM","DateSeparator":"/","TimeSeparator":":","FirstDayOfWeek":0,"DateSlots":{"Month":0,"Year":2,"Day":1},"ShortYearCenturyEnd":2029,"TimeInputOnly":false},"displayDateFormat":"M/d/yyyy h:mm tt","enabled":true,"incrementSettings":{InterceptArrowKeys:true,InterceptMouseWheel:true,Step:1},"styles":{HoveredStyle: ["width:100%;", "riTextBox riHover"],InvalidStyle: ["width:100%;", "riTextBox riError"],DisabledStyle: ["width:100%;", "riTextBox riDisabled"],FocusedStyle: ["width:100%;", "riTextBox riFocused"],EmptyMessageStyle: ["width:100%;", "riTextBox riEmpty"],ReadOnlyStyle: ["width:100%;", "riTextBox riRead"],EnabledStyle: ["width:100%;", "riTextBox riEnabled"]}}, null, null, $get("d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker_dateInput"));$create(Telerik.Web.UI.RadCalendar, {"_DayRenderChangedDays":{},"_FormatInfoArray":[["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],["January","February","March","April","May","June","July","August","September","October","November","December",],["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",],"dddd, MMMM dd, yyyy h:mm:ss tt","dddd, MMMM dd, yyyy","h:mm:ss tt","MMMM dd","ddd, dd MMM yyyy HH\':\'mm\':\'ss \'GMT\'","M/d/yyyy","h:mm tt","yyyy\'-\'MM\'-\'dd\'T\'HH\':\'mm\':\'ss","yyyy\'-\'MM\'-\'dd HH\':\'mm\':\'ss\'Z\'","MMMM, yyyy","AM","PM","/",":",0],"_ViewRepeatableDays":{},"_ViewsHash":{d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker_calendar_Top : [[2009,6,1], 1]},"_calendarWeekRule":0,"_culture":"en-US","_enableViewSelector":false,"_firstDayOfWeek":7,"_postBackCall":"__doPostBack(\u0027d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9$RetireDatePicker$calendar\u0027,\u0027@@\u0027)","clientStateFieldID":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker_calendar_ClientState","enabled":true,"monthYearNavigationSettings":["Today","OK","Cancel","Date is out of range.","False"],"skin":"Default","specialDaysArray":[],"stylesHash":{DayStyle: ["", ""],CalendarTableStyle: ["", "rcMainTable"],OtherMonthDayStyle: ["", "rcOtherMonth"],TitleStyle: ["", ""],SelectedDayStyle: ["", "rcSelected"],SelectorStyle: ["", ""],DisabledDayStyle: ["", "rcDisabled"],OutOfRangeDayStyle: ["", "rcOutOfRange"],WeekendDayStyle: ["", "rcWeekend"],DayOverStyle: ["", "rcHover"],FastNavigationStyle: ["", "RadCalendarMonthView RadCalendarMonthView_Default"],ViewSelectorStyle: ["", "rcViewSel"]},"useColumnHeadersAsSelectors":false,"useRowHeadersAsSelectors":false}, null, null, $get("d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker_calendar"));$create(Telerik.Web.UI.RadTimeView, {"_ItemsCount":24,"_OwnerDatePickerID":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker","_TimeOverStyleCss":"rcHover","_culture":"en-US","_timeFormat":"t","clientStateFieldID":"d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker_timeView_ClientState","itemStyles":{TimeStyle: ["", ""],AlternatingTimeStyle: ["", ""],HeaderStyle: ["", "rcHeader"],FooterStyle: ["", "rcFooter"],TimeOverStyle: ["", "rcHover"]}}, null, null, $get("d3e2ba0a-9efb-455d-bba8-37b8d17eb2c9_RetireDatePicker_timeView"));});
//]]>
</script>

Also, it seems that part of this is rendered earlier in the page.  (I have two script managers - one in the master view, the other is required for the PartialView)

7 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 09 Jun 2009, 07:24 AM
Hi John,

I'm afraid that currently our RadDatePicker does not support rendering in partial views. However we are currently researching a possibility to better our support for partial view rendering.

Please excuse us for the inconvenience.

Best wishes,
Rosen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
James
Top achievements
Rank 1
answered on 14 Jul 2009, 03:24 PM
Will it be partial view improvement in the Q2'09 release?
0
Rosen
Telerik team
answered on 17 Jul 2009, 12:23 PM
Hello James,

In order to use RadDatePicker in ASP.NET MVC environment you may consider to take the advantage of RegisterWithScriptManager property in order to explicitly render the control. I have attached a small demo app which demonstrates a possible implementation of such approach. Please give it a spin and let us know if this helps.

Regards,
Rosen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
dercoa
Top achievements
Rank 1
answered on 06 Aug 2009, 09:59 AM
Hello Rosen,

I'm trying to use the approach with explicit rendering of the controls. For RadDatePicker and RadComboBox everything works fine, thanks! But when I try to render RadTimePicker control, I encounter the following problem: the control do appear on the page, but when I click on the TimePopupButton, the time picking popup doesn't appear. I've dug deeper into the problem and have discovered that the content for this popup is not even emitted when the control is rendering explicitly. Could you please provide the way how to make RadTimePicker to render this popup properly?

Thanks in advance!
0
Nikolay Rusev
Telerik team
answered on 11 Aug 2009, 12:54 PM
Hello Dercoa,

Pease find the attached application. It demonstrates how you can workaround the behavior of RadTimePicker.

Kind regards,
Nikolay
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
dercoa
Top achievements
Rank 1
answered on 11 Aug 2009, 03:16 PM
Hello Nikolay,
it helped thanks!


But the one problem still remains with the TimePicker rendering: its TimeView control doesn't get the skin applied. I've looked inside the Html and see that the attribute "class="RadCalendarTimeView RadCalendarTimeView_Default" is not assigned to the control's underlying elements. How can the skin be applied to the TimeView dropdown of RadTimePicker?

Thanks for you help!
0
Nikolay Rusev
Telerik team
answered on 14 Aug 2009, 01:19 PM
Hello Dercoa,

You are right. I am attaching modified version of the example. Pelase find it attached to this post.
I hope this helps.

Kind regards,
Nikolay
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Tags
UI for ASP.NET AJAX in ASP.NET MVC
Asked by
John Brahy
Top achievements
Rank 1
Answers by
Rosen
Telerik team
James
Top achievements
Rank 1
dercoa
Top achievements
Rank 1
Nikolay Rusev
Telerik team
Share this question
or