Hello,
I'm using a RadAjaxManager to perform an async request to the code behind. With Chrome, the page jumps to the top and then returns to the original scroll location. I'm kicking off the request via the change event of a Kendo UI DatePicker. The event calls the ajaxRequestWithTarget js function from the RadAjaxManager. Sometimes is takes 1 or 2 calendar date changes for this behavior to start. This behavior only happens with Chrome (42.0.2311.90 m). Below is an example.
Browser: Chrome (42.0.2311.90 m)
Dev Environment: Visual Studio 2013
Telerik Version: UI for ASP.NET AJAX Q1 2015
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="RadAjaxManagerIssue.Test" %><br><!DOCTYPE html><br><br><html xmlns="http://www.w3.org/1999/xhtml"><br> <br><head runat="server"><br> <title></title><br> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script><br> <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.ui.core.min.js"></script><br> <link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /><br> <link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css" rel="stylesheet" type="text/css"/><br></head><br><br><body> <br> <form id="form1" runat="server"><br> <br> <div><br> <telerik:RadScriptManager ID="rsm" runat="server"> </telerik:RadScriptManager><br> <br> <div style="padding-top: 1500px;"><br> <input id="txtMonth" runat="server" /><br> <asp:CustomValidator ID="valMonthPicker" ControlToValidate="txtMonth" ClientValidationFunction="IsValidDate" Text="*" runat="server"><br> </asp:CustomValidator><br> <input id="txtUpdatedControl" runat="server" /> <br> </div><br> </div><br> <br> <telerik:RadAjaxManager ID="ram" runat="server"><br> <AjaxSettings><br> <telerik:AjaxSetting AjaxControlID="txtMonth"><br> <UpdatedControls><br> <telerik:AjaxUpdatedControl ControlID="txtUpdatedControl" /><br> </UpdatedControls><br> </telerik:AjaxSetting><br> </AjaxSettings><br> </telerik:RadAjaxManager><br> <br> <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"><br> <script type="text/javascript"> <br> function InitiateAsyncRequest() {<br> $find('ram').ajaxRequestWithTarget('txtMonth', '');<br> return false;<br> }<br><br> function IsValidDate(source, args) {<br> var datePicker = $('#txtMonth').data('kendoDatePicker');<br> var date = datePicker.value();<br> var format = datePicker.format;<br> args.IsValid = kendo.parseDate(date, format);<br> }<br><br> $('#txtMonth').kendoDatePicker({<br> start: 'year',<br> depth: 'year',<br> format: 'MM/yyyy',<br> change: InitiateAsyncRequest<br> });<br> </script><br> </telerik:RadCodeBlock><br> </form><br></body><br></html>4 Answers, 1 is accepted
Rank 1
This might be a little easier to look at...
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="RadAjaxManagerIssue.Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.ui.core.min.js"></script>
<link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager ID="rsm" runat="server"> </telerik:RadScriptManager>
<div style="padding-top: 1500px;">
<input id="txtMonth" runat="server" />
<asp:CustomValidator ID="valMonthPicker" ControlToValidate="txtMonth" ClientValidationFunction="IsValidDate" Text="*" runat="server">
</asp:CustomValidator>
<input id="txtUpdatedControl" runat="server" />
</div>
</div>
<telerik:RadAjaxManager ID="ram" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="txtMonth">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="txtUpdatedControl" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function InitiateAsyncRequest() {
$find('ram').ajaxRequestWithTarget('txtMonth', '');
return false;
}
function IsValidDate(source, args) {
var datePicker = $('#txtMonth').data('kendoDatePicker');
var date = datePicker.value();
var format = datePicker.format;
args.IsValid = kendo.parseDate(date, format);
}
$('#txtMonth').kendoDatePicker({
start: 'year',
depth: 'year',
format: 'MM/yyyy',
change: InitiateAsyncRequest
});
</script>
</telerik:RadCodeBlock>
</form>
</body>
</html>
I would suggest you to try ajaxify the controls by wrapping the with RadAjaxPanel control instead of using RadAjaxManager. Give this a try and see how it goes.
Also I would suggest you to inspect the response using the browser's console when the described issue appears and verify if any js errors pop up on the page
Regards,
Maria Ilieva
Telerik
See What's Next in App Development. Register for TelerikNEXT.
Rank 1
There seems to be a conflict with one of the Kendo elements, which is causing the scrolling issue.
However, if you wrap the calling of the ajaxRequestWithTarget method within a setTimeout function, the issue will resolved:
function InitiateAsyncRequest() { setTimeout(function () { $find('ram').ajaxRequestWithTarget('txtMonth', ''); }) return false;}Please give this a try and see if it works correctly on your end too.
Regards,
Konstantin Dikov
Telerik
See What's Next in App Development. Register for TelerikNEXT.