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

RadAjaxPanel & Dropdownlist with AutoPostBack enabled issue

5 Answers 477 Views

Ajax

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

John asked on 02 Mar 2014, 02:21 PM

I have a dropdownlist located inside RadAjax Panel (Build Q4 2006 ) with AutoPostBack option enabled and SelectedIndexChanged event is handled. Whenever loading the page a javascript exception is through "Expected ')'".

The problem is related to the generated Javascript handler added to the dropdownlist "onchange" client event. I have tried to locate a solution for this issue through all threads but couldn't locate anything helpful for this issue.

Here is the aspx markup used by the page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="RadAjax.Net2" Namespace="Telerik.WebControls" TagPrefix="radA" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<radA:RadAjaxPanel ID="RadAjaxPanel1" runat="server" height="200px" width="300px" ClientIDMode="AutoID" EnableOutsideScripts="True">
<br />
<asp:DropDownList ID="ddlItems" runat="server" AutoPostBack="True">
<asp:ListItem>Item1</asp:ListItem>
<asp:ListItem>Item2</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<asp:Label ID="lblTest" runat="server"></asp:Label>

</radA:RadAjaxPanel>
</div>
</form>
</body>
</html>

5 Answers, 1 is accepted

answered on 03 Mar 2014, 11:42 AM

Hi John,

Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" onchange="Change();">

<asp:ListItem Text="Item1">

</asp:ListItem>

<asp:ListItem Text="Item2">

</asp:ListItem>

<asp:ListItem Text="Item3">

</asp:ListItem>

</asp:DropDownList>

<br />

<asp:Label ID="Label1" runat="server">

</asp:Label>

</telerik:RadAjaxPanel>

C#:

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

Label1.Text = DropDownList1.SelectedItem.Text;

}

JavaScript:

<script type="text/javascript">

function Change(sender, args) {

var dropdownlist = document.getElementById("DropDownList1");

var text = dropdownlist.options[dropdownlist.selectedIndex].text;

alert(text);

}

</script>

Thanks,
Shinu.

answered on 12 Aug 2014, 08:40 AM

Dear Shinu,

I followed the same which was sent by you but again no result came out. The reason was related to the generated response and the error was "SCRIPT1006: Expected ')'". By investigating further the issue it is related to the generated javascript code for postback of the dropdownlist control within the Ajax Panel. The generated code is missing ")" character which leads to javascript error and not completing the request.

ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="RadAjax.Net2" Namespace="Telerik.WebControls" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" onchange="Change();">

<asp:ListItem Text="Item1">

</asp:ListItem>

<asp:ListItem Text="Item2">

</asp:ListItem>

<asp:ListItem Text="Item3">

</asp:ListItem>

</asp:DropDownList>

<br />

<asp:Label ID="Label1" runat="server">

</asp:Label>

</telerik:RadAjaxPanel>

<script type="text/javascript">

function Change(sender, args) {

var dropdownlist = document.getElementById("DropDownList1");

var text = dropdownlist.options[dropdownlist.selectedIndex].text;

alert(text);

}

</script>

</form>

</body>

</html>

CS Code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

Label1.Text = DropDownList1.SelectedItem.Text;

}

Rendered Page Source:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>

</title></head>

<body>

<form method="post" action="Default.aspx" id="form1">

<div class="aspNetHidden">

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value=

"YaCyfFCG9Tzgdp5OgI5JFuxwtXSsJzXb1x58pkgh46zdd7s2C0CUW3H3dXDwLeHHB0INeVAFbzRrDoHAiK3G95oXGVXyy+wWP6LLw8XZgf4QXt6ix2/qWj1Ecuj88C7I9PbUDMYWivvss4/cFp0J13rXbRtv/WTDEzw7jO/oLXBq1Ej5uf/MV9qOGFYbLp0x"

/>

</div>

<script type="text/javascript">

//<![CDATA[

var theForm = document.forms['form1'];

if (!theForm) {

theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

//]]>

</script>

<select name="DropDownList1" onchange="Change();setTimeout('AjaxNS.AR(\'DropDownList1\',\'\', 'RadAjaxPanel1', event)', 0)" id="DropDownList1">

<option selected="selected" value="Item1">Item1</option>

<option value="Item2">Item2</option>

<option value="Item3">Item3</option>

</select>

<br />

<span id="Label1"></span>

</div>

<script type="text/javascript">

function Change(sender, args) {

var dropdownlist = document.getElementById("DropDownList1");

var text = dropdownlist.options[dropdownlist.selectedIndex].text;

alert(text);

}

</script>

<div class="aspNetHidden">

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value=

"KUHLNYlXzZnkEY/z99Kqaz2G2UFLNWaAlPh+97bCs3mLu/8bhdQ0qe4W43pyXRpdlz2ZnF45XcaRBLumvJygZbbk3rihuUS+CxM744cAvPtb5btvKMgalPRt7dYwmPzoXFO9Tqa6MfjQI7ALhyZE/ld3RnZ+Pm2nmzQaP6Vo53PjlbaCxUSfTfdwGgD+RFwk"

/>

</div>

<script type="text/javascript"></script></form>

<script type="application/json" id="__browserLink_initializationData">

{"appName":"InternetExplorer","requestId":"61004c8f8b7a4e09886b271defafd5ca"}

</script>

<script type="text/javascript" src="http://localhost:61586/d86a65abfc4144c99a04cc0ce5abb18d/browserLink" async="async"></script>

</body>

</html>

Thanks,
John

answered on 25 Jun 2019, 01:26 PM

Hi Parthiban,

RadAjax.Net2 is part of the RadControls for ASP.NET suite, which was discontinued in 2009 in favor of Telerik UI for ASP.NET AJAX.

This component is 10+ years old and neither supports .NET 3, nor 4.7.2.

My advice is plan migration to RadAjaxPanel from Telerik UI for ASP.NET AJAX (Telerik.Web.UI.dll assembly), which supports all .NET frameworks as well as all modern browsers:

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.