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

Paste semicolon-separated values

3 Answers 208 Views

AutoCompleteBox

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

Ron asked on 15 Oct 2012, 08:43 AM

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">

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

<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, ""));

}

3 Answers, 1 is accepted

answered on 15 Oct 2012, 10:04 AM

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">

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

<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();

}

Accepted

answered on 17 Oct 2012, 01:12 PM

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.