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

Datepicker becomes 'static'

26 Answers 1007 Views

Date/Time Pickers

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

DocG asked on 01 Mar 2012, 12:35 PM

Hello!

I'm working on a single-screen application using Kendo for the UI. I just built in a datepicker on one of the screens, and it presented me with quite a strange behaviour.
Some background information: the application is single-screen, so I never navigate to different URLs, rather the content is changed by modifying the DOM with javascript. So I build up screens from scratch by creating the elements, and replacing $(body).html(), or any other parent I need to update if its a smaller change.
One of these screens has a DatePicker, created like this:

$("#captureDate").kendoDatePicker();

For the first time this screen loads, the DatePicker works fine. But if I navigate to another screen, and come back later, the DatePicker is loaded, but it's "frozen", meaning I can open it, it shows the right date, but none of the controls work inside the widget (changing the date/month/year etc.).
The #captureDate element is part of a kendo template rendered into the DOM every time this screen loads up (the element itself is an input with a date as the value, formatted with kendo.toString(), with culture set [to hu-HU]). The screens are "destroyed" on navigation by replacing the .html() of the changing element (usually the whole body) with the new screen's content.

What could be the cause of the problem? Thank you in advance for your help!

26 Answers, 1 is accepted

answered on 05 Apr 2012, 01:22 PM

I had to resolve this quickly, so I had to go back to jQuery UI datepicker (unfortunately not as feature rich as the kendo one) and I didn't have time to try and look into this.
But if it helps, a bit of clarification to the error description: It's not just the datepicker on that particular page, but if I initialise a datepicker, then replace the content of the page via $(body).html() (thus deleting the animation containers and such elements from the DOM), no new datepicker instance will work from that point on (the datepickers will only function properly if the whole document is reloaded after this).

By the way, the jQuery UI datepicker had a similar error too, where if you deleted the container element, no datepicker instances could be displayed any more, but that problem was already solved by someone in the jQ community.

answered on 13 Apr 2012, 02:15 PM

DatePickerTest.zip

Atanas,
sorry i was unclear. Actually i have same datePicker behavior, as it described here, but the steps i got it are described in the linked thread, because i was trying to remove the trailing divs with class named

k-animation-container

Anyway i got the example attached (VS 2010 ASP .NET MVC 3 with KendoUI).
Here is a short description on it (and two questions):

1. press "Load new DatePicker", open the datePicker dropdown
we can see then

<div class="k-animation-container">...</div>

appeared at the end of the HTML body

Press "Remove DatePicker" so it will remove datePicker with the div (k-animation-container).
Press "Load new DatePicker", to create datePicker second instance and open the datePicker dropDown. You can see it will have static content with unable to select the date in dropDown.

2. "Load new DatePicker", dont open the datePicker dropdown.
we will see at the end of the body:

<div style="display: none; " data-role="calendar" class="k-widget k-calendar">...</div

>

<

br

>

<

div class="k-calendar-container k-popup k-group k-reset" data-role="datepicker" style="display: none; position: absolute; "></div><br>

How do i remove these entries?

answered on 14 Apr 2012, 09:54 PM

I run the following commands in the ajax call back and prior to replacing the html contents.

$('.k-animation-container').remove();

$('.k-reset').remove();

It appears that the k-reset class is only added to the appended containers at the bottom of the body. Can Atanas confirm this?

So far this appears to be working for my single page ajax driven site allowing the AutoComplete and DatePicker controls to still function properly.

Update: Actually just ran across an error with DatePicker not functioning doing that. AutoComplete still appears to be ok with that.

Update2:

<script src="~/Scripts/kendo.datepicker.min.js" type="text/javascript"></script>

adding the datapicker.js script to the result for my ajax request has seemed to allow the datapicker to function with my previous selectors.

What I would see prior to this was the popup would open but I couldn't select the header to change the depth or select a day. Only the Today in the footer would still be selectable. With the datepicker script getting returned on each request that has my datepicker included it appears to then be initializing properly the same as the initial load of the page.

Accepted

answered on 13 Mar 2014, 05:11 PM

Anyway just in case somebody would be searching for the popup solution... this cleans the leftover empty containers.

... set global right click event... replace has(div) with your stuff.. I had a div as a top element in my context menu.

$(document).ready( function()
{
//Attach Kendo cleaner.
$( document ).on( "contextmenu", function()
{
//Remove all empty containers... from last to first.
var containers_empty: JQuery = $( ".k-animation-container:not(:has(div))" );
for ( var i: number = containers_empty.length - 1; i >= 0; --i )
{
containers_empty.get( i ).remove();
}
});
}

Br
Waldemar

answered on 15 Mar 2014, 05:40 PM

Ok after some more digging I've found out that Kendo works perfectly and that my code was problematic.

The main issue (my fault) was that on popup destruction the inner data (kendoMenu) was not cleared.
So the working code is:

private static m_ContextMenu_Div =
'<div id="cm_svg_background">\
<ul class="k-context-menu">\
<li data-menuID="' + Enum_ContextMenu_ID.Value.Zone_Create + '"><span class="context_menu_item">Create Zone</span></li>\
<li data-menuID="' + + Enum_ContextMenu_ID.Value.Line_Create + '"><span class="context_menu_item">Create Line</span></li>\
</ul>\
</div>';

private Image_OnContextMenu = ( e: MouseEvent ): any =>
{
//Append div to body.
//
//Notice:
//As it's on the body location the kendoMenu will just wrap around the div and will not create a new one.
$( 'body' ).append( CShape_Background.m_ContextMenu_Div );

//Show context menu.
this.m_ContextMenu = $( "#cm_svg_background ul" ).kendoMenu(
{
orientation: "vertical",
select: ( selected: any ): void =>
{
//Close context menu.
this.Image_ContextMenu_Close();

//Inform parent.
this.m_Callback_ContextMenu( <Enum_ContextMenu_ID.Value>+( selected.item.dataset.menuid ) );
}
}).data( 'kendoMenu' );

//Get requested context menu.
this.m_ContextMenu_popUp = ( <any>$( "#cm_svg_background" ) ).kendoPopup(
{
//anchor: "#izs_svg",
anchor: "body",
animation: false,
collision: "fit flip"
}).data( "kendoPopup" );

//Register global OnClick event so that we'll be able to handle any out of menu clicks.
$( document ).on( "click", this.Image_ContextMenu_Close );

//Show context menu.
var coordinates = new Base.SCoortinates( e );

this.m_ContextMenu_popUp.open( coordinates.m_X, coordinates.m_Y );

//Do not show default context menu.
e.preventDefault();
}
private Image_ContextMenu_Close = (): any =>
{
//Close context menu.
if ( this.m_ContextMenu_popUp != null )
{
//Remove context menu.
this.m_ContextMenu.destroy();
this.m_ContextMenu = null;

//Close popup window.
this.m_ContextMenu_popUp.destroy();
this.m_ContextMenu_popUp = null;

//Remove page div.
$( '#cm_svg_background' ).remove();
}

//Remove global event.
$( document ).off( "click", this.Image_ContextMenu_Close );
}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Datepicker becomes 'static'

26 Answers, 1 is accepted