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

Javascript error with RadAutoCompleteBox

0 Answers 161 Views

AutoCompleteBox

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

Robin asked on 26 Jun 2013, 07:28 AM

Hello,
I'm now developing a product entry with RadListView.
RadListView InsertItemTemplate contains three textboxes ,one RadAutoCompleteBox and two command buttons.
RadAutoCompleteBox is use to choose or add new tag for each products. I.e AllowCustomEntry is true.

There are two textboxes outside of RadListView.
Those two textboxes and RadListView exists under different asp panels.

And there are 2 RadInputManager controls. One RadInputManager is for two textbox outside of RadListView and another one is for
controls inside of RadListView templates. Both are used to validate Empty data.

There is another Button inside RadListView LayoutTemplate to trigger InsertItemTemplate to appear.
When I click that button, there are two javascript errors:
# Uncaught TypeError: Object #<Object> has no method 'toUpperCase'
# Uncaught TypeError: undefined is not a function from Telerik.Web.UI.WebResource.axd:6.
Then, RadAutoCompletebox stopped working. It does nothing when I type ";" Delimiter.
I can't even see it's EmptyMessage.

These errors occur when there is no data in RadListView datasource.
If I manually add some records to ListView's datasource, it works like normal.

And also there is no errors if I remove RadInputManager for outside controls.
I don't know whether there is some conflict with RadInputMangager.and RadAutoCompleteBox.

I reproduced the error in sample page and you can see below.
There are some commented lines inside GetSampleData() function.
Uncomment them and there will be no errors on Button click.

SampleWebPage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SampleWebPage.aspx.cs" Inherits="CMMS.SampleWebPage"

%>

<!DOCTYPE html>

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

<head id="Head1" runat="server">

<title></title>

</head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadSkinManager ID="RadSkinManager" runat="server" Skin="Hay" />

<telerik:RadAjaxManager ID="ctl00_ajaxManager" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="pnlProducts">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadInputManager_TemplateControls" UpdatePanelRenderMode="Inline" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="pnlOthers">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadInputManager1" UpdatePanelRenderMode="Inline" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<telerik:RadAjaxLoadingPanel ID="ajaxloading" runat="server"

IsSticky="true" Transparency="20" Skin="">

</telerik:RadAjaxLoadingPanel>

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

<asp:Panel ID="pnlOthers" runat="server">

<table>

<tr>

<td>Host Code:

</td>

<td>

<asp:TextBox ID="txtHostCode" runat="server" Width="300" ValidationGroup="gp1" />

</td>

</tr>

<tr>

<td>Host Name:

</td>

<td>

<asp:TextBox ID="txtHostName" runat="server" Width="300" ValidationGroup="gp1" />

</td>

</tr>

</table>

</asp:Panel>

<br />

<asp:Panel ID="pnlProducts" runat="server">

<telerik:RadListView ID="lvProducts" runat="server" ItemPlaceholderID="ProductsContainer"

DataKeyNames="ID" AllowPaging="true" Width="500"

OnItemCreated="lvProducts_ItemCreated"

OnNeedDataSource="lvProducts_NeedDataSource"

OnItemCommand="lvProducts_ItemCommand">

<LayoutTemplate>

<fieldset>

<legend>Products and Services

</legend>

<asp:PlaceHolder ID="ProductsContainer" runat="server"></asp:PlaceHolder>

<div style="clear: both" />

<div>

<telerik:RadButton ID="btnInitInsert" runat="server" Text="Insert new product"

CommandName="<%# RadListView.InitInsertCommandName %>" ButtonType="LinkButton"

OnClick="btnProductInitInsert_Click" />

</div>

</table>

</fieldset>

</LayoutTemplate>

<ItemTemplate>

<fieldset>

<table>

<tr>

<td style="width: 100px;">Product Code:

</td>

<td>

<%#Eval("Code")%>

</td>

</tr>

<tr>

<td>Product Name:

</td>

<td>

<%#Eval("Name") %>

</td>

</tr>

<tr>

<td>Description:

</td>

<td>

<%# Eval("Description")%>

</td>

</tr>

<tr>

<td>Tags:

</td>

<td>

<asp:Label ID="lblTagString" runat="server" Visible="false" Text='<%#Bind("TagString")%>' />

<telerik:RadAutoCompleteBox ID="racTag" runat="server" AllowCustomEntry="true"

InputType="Token" Width="607" Enabled="false">

</telerik:RadAutoCompleteBox>

</td>

</tr>

</table>

</fieldset>

</ItemTemplate>

<InsertItemTemplate>

<fieldset>

<legend>New Product

</legend>

<table>

<tr>

<td style="width: 100px">Code<b style="color: Red">*</b>:

</td>

<td>

<asp:TextBox ID="txtCode" runat="server" Text='<%# Bind("Code") %>' Width="300px" ValidationGroup="gp2"></asp:TextBox>

</td>

</tr>

<tr>

<td>Name<b style="color: Red">*</b>:

</td>

<td>

<asp:TextBox ID="txtName" runat="server" Text='<%# Bind("Name") %>' Width="300px" ValidationGroup="gp2"></asp:TextBox>

</td>

</tr>

<tr>

<td>Description<b style="color: Red">*</b>:

</td>

<td>

<asp:TextBox ID="txtDescription" runat="server" Text='<%#Bind("Description")%>' ValidationGroup="gp2"

Width="500px" Height="60" TextMode="MultiLine" />

</td>

</tr>

<tr>

<td>Tags:

</td>

<td>

<telerik:RadAutoCompleteBox ID="racTag" runat="server" AllowCustomEntry="true"

EmptyMessage="Enter tag names separated by semicolon ( ; )" InputType="Token" Width="507" DropDownWidth="300"

DataTextField="tag_value" DataValueField="ID">

</telerik:RadAutoCompleteBox>

</td>

</tr>

<tr>

<td colspan="2">

<br />

</td>

</tr>

<tr>

<td style="text-align: right;" colspan="2">

<telerik:RadButton ID="btnPerformInsert" runat="server" Text="Insert" CommandName="<%# RadListView.PerformInsertCommandName %>" Width="70" ButtonType="LinkButton"

CausesValidation="true" ValidationGroup="gp2" />

<telerik:RadButton ID="btnCancel" runat="server" Text="Cancel" CommandName="<%# RadListView.CancelCommandName %>" CausesValidation="false" Width="70" ButtonType="LinkButton" />

</td>

</tr>

</table>

</fieldset>

</InsertItemTemplate>

<EmptyDataTemplate>

<fieldset>

<legend>Products and Services

</legend>

<fieldset>

No data to display!

</fieldset>

<telerik:RadButton ID="btnInitInsert" runat="server" Text="Insert new product"

OnClick="btnProductInitInsert_Click" CommandName="<%# RadListView.InitInsertCommandName %>" ButtonType="LinkButton" />

</fieldset>

</EmptyDataTemplate>

</telerik:RadListView>

</asp:Panel>

</telerik:RadAjaxPanel>

<telerik:RadInputManager runat="server" ID="RadInputManager1">

<telerik:TextBoxSetting BehaviorID="txtbeh" InitializeOnClient="true" ErrorMessage="Required field!"

Validation-ValidationGroup="gp1" Validation-IsRequired="true">

<TargetControls>

<telerik:TargetInput ControlID="txtHostCode" />

<telerik:TargetInput ControlID="txtHostName" />

</TargetControls>

</telerik:TextBoxSetting>

</telerik:RadInputManager>

<telerik:RadInputManager runat="server" ID="RadInputManager_TemplateControls">

<telerik:TextBoxSetting BehaviorID="txtbeh2" InitializeOnClient="true" ErrorMessage="Required field!"

Validation-ValidationGroup="gp2" Validation-IsRequired="true">

</telerik:TextBoxSetting>

</telerik:RadInputManager>

</div>

</form>

</body>

</html>

SampleWebPage.aspx.cs

using System;

using System.Collections.Generic;

using System.Data;

using System.Globalization;

using System.IO;

using System.Linq;

using System.Threading;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

namespace CMMS

{

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

{

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

LoadProductListView();

lvProducts.DataBind();

}

private void LoadProductListView()

{

lvProducts.DataSource = GetSampleData();

}

private DataTable GetSampleData()

{

DataTable l_Table = new DataTable("Sample");

l_Table.Columns.Add("ID");

l_Table.Columns.Add("Code");

l_Table.Columns.Add("Name");

l_Table.Columns.Add("Description");

l_Table.Columns.Add("TagString");

//l_Table.Rows.Add(new string[] { "1", "Code1", "Name1", "Description1", "" });

//l_Table.Rows.Add(new string[] { "2", "Code2", "Name2", "Description2", "" });

//l_Table.Rows.Add(new string[] { "3", "Code3", "Name3", "Description3", "" });

return l_Table;

}

protected void btnProductInitInsert_Click(object sender, System.EventArgs e)

{

lvProducts.ShowInsertItem();

lvProducts.FindControl("btnInitInsert").Visible = false;

}

protected void lvProducts_ItemCommand(object sender, RadListViewCommandEventArgs e)

{

if (e.CommandName == RadListView.CancelCommandName)

{

HideProductInsertItemTemplate();

}

private void HideProductInsertItemTemplate()

{

lvProducts.InsertItemPosition = RadListViewInsertItemPosition.None;

lvProducts.FindControl("btnInitInsert").Visible = true;

}

protected void lvProducts_NeedDataSource(object sender, RadListViewNeedDataSourceEventArgs e)

{

LoadProductListView();

}

protected void lvProducts_ItemCreated(object sender, RadListViewItemEventArgs e)

{

if (e.Item is RadListViewInsertItem && e.Item.IsInEditMode)

{

TextBox l_Code = e.Item.FindControl("txtCode") as TextBox;

TextBox l_Name = e.Item.FindControl("txtName") as TextBox;

TextBox l_Desc = e.Item.FindControl("txtDescription") as TextBox;

TextBoxSetting l_textboxSetting = (TextBoxSetting)RadInputManager_TemplateControls.GetSettingByBehaviorID("txtbeh2");

l_textboxSetting.TargetControls.Add(new TargetInput(l_Code.UniqueID, true));

l_textboxSetting.TargetControls.Add(new TargetInput(l_Name.UniqueID, true));

l_textboxSetting.TargetControls.Add(new TargetInput(l_Desc.UniqueID, true));

}

if (e.Item.FindControl("racTag") != null)

{

RadAutoCompleteBox l_AutoCompleteBox = e.Item.FindControl("racTag") as RadAutoCompleteBox;

l_AutoCompleteBox.DataTextField = "tag_value";

l_AutoCompleteBox.DataValueField = "ID";

l_AutoCompleteBox.DataSource = GetSampleTagData();

l_AutoCompleteBox.DataBind();

}

private object GetSampleTagData()

{

DataTable l_Table = new DataTable("SampleTagTable");

l_Table.Columns.Add("ID");

l_Table.Columns.Add("tag_value");

l_Table.Rows.Add(new string[] { "1", "Clothing" });

l_Table.Rows.Add(new string[] { "2", "Shoes" });

l_Table.Rows.Add(new string[] { "3", "Sunglasses" });

l_Table.Rows.Add(new string[] { "4", "Watches" });

l_Table.Rows.Add(new string[] { "5", "Books" });

return l_Table;

}

Hope you can use my attached codes to reproduce the error.
Please let me know how can I make this work.
I have tested in Chrome, Firefox and IE10. All have same result.

Thanks in advanced,
Robin

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Javascript error with RadAutoCompleteBox

No answers yet. Maybe you can help?