RadDateTimePicker in PartialView - JavaScript error

Thread is closed for posting
8 posts, 0 answers
  1. John Brahy
    John Brahy avatar
    2 posts
    Member since:
    Apr 2007

    Posted 03 Jun 2009 Link to this post

    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)

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 09 Jun 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. James
    James avatar
    3 posts
    Member since:
    Oct 2006

    Posted 14 Jul 2009 Link to this post

    Will it be partial view improvement in the Q2'09 release?
  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 17 Jul 2009 Link to this post

    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.
  6. dercoa
    dercoa avatar
    2 posts
    Member since:
    Aug 2009

    Posted 06 Aug 2009 Link to this post

    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!
  7. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 11 Aug 2009 Link to this post

    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.
  8. dercoa
    dercoa avatar
    2 posts
    Member since:
    Aug 2009

    Posted 11 Aug 2009 Link to this post

    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 "
  9. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 14 Aug 2009 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017