Paste semicolon-separated values

4 posts, 1 answers
  1. Zhanna Gultaeva
    Zhanna Gultaeva avatar
    33 posts
    Member since:
    Jan 2009

    Posted 15 Oct 2012 Link to this post

    Hello.

    I have a case:

    1) User pastes a semicolon-separated list of entries into RadAutoCompleteBox;
    2) Code must refine entries according to some logic and only add valid entries to Entries collection.

    But it seems that the only case when I can modify RadAutoCompleteBox.Entries collection and my modifications are shown after postback is the initial load of a page. When I process 'paste' event on client via JavaScript and use __doPostBack(), any modifications to RadAutoCompleteBox.Entries are missed.

    Here's a project reproducing the problem. When I paste, for example, "Most;are" (without quotes, assuming to paste two tokens: 'Most' and 'are'), nothing is added. If I comment out UpdatePanel it works as expected, but full page postback occurs.

    MainPage.aspx


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="RC.ITRequest.UI.MainPage" %>
    <%@ Register Assembly="Telerik.Web.UI, Version=2012.2.1002.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="jquery-1.8.2.min.js" ></script>
     
        <placeholder runat="server" >
            <script type="text/javascript">
                $(document).ready(function () {
                    $(document).on('paste', 'input[name="' + '<%=RACB.ClientID %>'.replace('_', '$') + '"]', function (e) {
                        var el = $(this);
                        /* Just a small timeout till value can get populated */
                        setTimeout(function () {
                            // replace semicolon surrounded by sequences of space chars with single semicolon 
                            var text = $(el).val().replace(/ *; */g, ';');
                            __doPostBack('<%=RACB.ClientID %>', text);
                        }, 100);
                    });
                });
            </script>
        </placeholder>
    </head>
    <body>
        <form id="form1" runat="server">
     
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>       
     
            <asp:UpdatePanel runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional" >
                <ContentTemplate>
                    <telerik:RadAutoCompleteBox runat="server"
                                                ID="RACB"
                                                InputType="Token" />
                </ContentTemplate>
            </asp:UpdatePanel>
     
            <asp:Label runat="server" ID="lblLog" /><br/>
     
            <asp:Button Text="Press me to post back!"  runat="server" />
        </div>
     
        </form>
    </body>
    </html>

     

    MainPage.aspx.cs

    using System;
    using System.Collections.Generic;
    using Telerik.Web.UI;
     
    namespace RC.ITRequest.UI
    {
        public partial class MainPage : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                List<string> adObjects = new List<string> {
                    "Most",
                    "of",
                    "these",
                    "pages",
                    "are",
                    "in",
                    "the",
                    "Afrikaans",
                    "language",
                    "spoken",
                    "in",
                    "South",
                    "Africa"
                };
                RACB.DataSource = adObjects;
     
                if (Page.IsPostBack)
                {
                    lblLog.Text += "<br/>__EVENTARGUMENT: '" + Request.Form["__EVENTARGUMENT"] + "'";               
                    var newEntries = Request.Form["__EVENTARGUMENT"].Split(';');
                    foreach (string newEntry in newEntries)
                    {
                        RACB.Entries.Add(new AutoCompleteBoxEntry(newEntry, ""));
                    }
                }
            }
        }
    }

     

  2. Zhanna Gultaeva
    Zhanna Gultaeva avatar
    33 posts
    Member since:
    Jan 2009

    Posted 15 Oct 2012 Link to this post

    If I add UpdatePanel.Update() within if(Page.PostBack){} block, an error occurs:

    Microsoft JScript runtime error: Sys.InvalidOperationException: Two components with the same id 'RACB' can't be added to the application.

    MainPage.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="RC.ITRequest.UI.MainPage" %>
    <%@ Register Assembly="Telerik.Web.UI, Version=2012.2.1002.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="jquery-1.8.2.min.js" ></script>
     
        <placeholder runat="server" >
            <script type="text/javascript">
                $(document).ready(function () {
                    $(document).on('paste', 'input[name="' + '<%=RACB.ClientID %>'.replace('_', '$') + '"]', function (e) {
                        var el = $(this);
                        /* Just a small timeout till value can get populated */
                        setTimeout(function () {
                            // replace semicolon surrounded by sequences of space chars with single semicolon 
                            var text = $(el).val().replace(/ *; */g, ';');
                            __doPostBack('<%=RACB.ClientID %>', text);
                        }, 100);
                    });
                });
            </script>
        </placeholder>
    </head>
    <body>
        <form id="form1" runat="server">
     
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>       
     
            <asp:UpdatePanel ID="updPanel" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional" >
                <ContentTemplate>
                    <telerik:RadAutoCompleteBox runat="server"
                                                ID="RACB"
                                                InputType="Token" />
                </ContentTemplate>
            </asp:UpdatePanel>
     
            <asp:Label runat="server" ID="lblLog" /><br/>
     
            <asp:Button Text="Press me to post back!"  runat="server" />
        </div>
     
        </form>
    </body>
    </html>

    MainPage.aspx.cs
    using System;
    using System.Collections.Generic;
    using Telerik.Web.UI;
     
    namespace RC.ITRequest.UI
    {
        public partial class MainPage : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                List<string> adObjects = new List<string> {
                    "Most",
                    "of",
                    "these",
                    "pages",
                    "are",
                    "in",
                    "the",
                    "Afrikaans",
                    "language",
                    "spoken",
                    "in",
                    "South",
                    "Africa"
                };
                RACB.DataSource = adObjects;
     
                if (Page.IsPostBack)
                {
                    lblLog.Text += "<br/>__EVENTARGUMENT: '" + Request.Form["__EVENTARGUMENT"] + "'";               
                    var newEntries = Request.Form["__EVENTARGUMENT"].Split(';');
                    foreach (string newEntry in newEntries)
                    {
                        RACB.Entries.Add(new AutoCompleteBoxEntry(newEntry, ""));
                    }
                    updPanel.Update();
                }
            }
        }
    }
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 17 Oct 2012 Link to this post

    Hi Vakhtang,

    Take a look at the video showing how your code behaves at my end: http://screencast.com/t/vgFZqTncS. I have been testing this scenario with the very latest version of RadControls for ASP.NET AJAX.
    (I have tested it with and without the ChildrenAsTriggers, and UpdateMode definition for the asp:UpdatePanel and still was not able to replicate the error in question.)

    Let me know if I am missing something.

    Kind regards,
    Ivana
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Zhanna Gultaeva
    Zhanna Gultaeva avatar
    33 posts
    Member since:
    Jan 2009

    Posted 19 Oct 2012 Link to this post

    Thank you, Ivana.

    The problem has gone with Telerik.Web.UI , Version=2012.3.1016.35
Back to Top