RadAjaxPanel & Dropdownlist with AutoPostBack enabled issue

6 posts, 0 answers
  1. John
    John avatar
    3 posts
    Member since:
    Nov 2012

    Posted 02 Mar 2014 Link to this post

    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>



  2. John
    John avatar
    3 posts
    Member since:
    Nov 2012

    Posted 02 Mar 2014 in reply to John Link to this post

    I forgot to mention that I am building the project on .Net framework 4.5.1. 

    I have tested downgrading the .Net framework and the maximum .Net framework which works with no issues is 3.5.

    Hope there would be a solution to make it work on .Net framework 4.5.1.

    Thanks,
    John
  3. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Mar 2014 Link to this post

    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 />
        <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.
  4. John
    John avatar
    3 posts
    Member since:
    Nov 2012

    Posted 12 Aug 2014 in reply to Shinu Link to this post

    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>
     
    <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 />
                <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>
     
    <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 />
                <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>
     
    <!-- Visual Studio Browser Link -->
    <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>
    <!-- End Browser Link -->
     
    </body>
    </html>



    Thanks,
    John
  5. Parthiban
    Parthiban avatar
    2 posts
    Member since:
    Jun 2019

    Posted 22 Jun in reply to John Link to this post

    I have a red control Ajax panel version v2.0.50727 problem is user control dropdown autopostback issue after framework upgrade 3.5 to 4.7.2 in error “Uncaught SyntaxError: missing). I tried to solve in this issue on-change dopostback event argument. It is working fine. But drop down event fires other controls like textbox us read-only is value are comes null or empty. can you please help me solve this issue completely or any new dll support this issue.
  6. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 25 Jun Link to this post

    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.
Back to Top