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

ListView Javascript

6 Answers 416 Views

ListView

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

Shane asked on 06 Oct 2010, 04:33 PM

Greetings,

I am attempting to access controls inside the EditItemTemplate Via a Javascript. It is a project requirement that I read the text of a text box as it is entered and based on that text hide and remove information. Below is the code I currently working with. Again, the text box is currently inside a RadListView EditItemTemplate. Any information would be most appreciated.

<telerik:RadTextBox runat="server" ID="myTextBox" Width="150px" Text='<%#Bind("Number")%>'>

<ClientEvents OnLoad="showPLC" OnKeyPress="showPLC" />

</telerik:RadTextBox>

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

function showPLC() {

var eItem = $find('<%= RadListView1.Items[0] %>');

if (eItem.IsInEditMode) {

var num = eItem.FindControl("myTextBox").val();

var bin = num.substring(0,6);

if (bin == '577442') {

eItem.FindControl("divEffect1").hide();

eItem.FindControl("divEffect2").slideDown();

} else {

eItem.FindControl("divEffect1").slideDown();

eItem.FindControl("divEffect2").hide();

}

</script>

Thank you for your time!

6 Answers, 1 is accepted

answered on 07 Oct 2010, 04:28 PM

Hi Shane,

You seem to be confusing server-side ASP.NET methods with client-side Javascript methods and the resulting Javascript code is not working at all.

1. $find() expects a client ID (string) associated with an ASP.NET AJAX control. RadListView1.Items[0] is not such a string.

2. There is no Javascript method FindControl().

3. val(), hide() and slideDown() look like jQuery methods, however you execute them with no reference to a jQuery object.

I recommend you to start from scratch and recreate a simplified version of your scenario outside RadListView with simple asp:TextBox only, so that you can get a grasp on the general Javascript knowledge required in this case. Afterwards we will help you incorporating the implementation inside RadListView, if you need any further assistance.

Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 07 Oct 2010, 04:47 PM

I Apologize, I should have been more clear. You are correct in that I do not have a vast understanding of Javascript. However I did have the Javascript working outside the of EditItemTemplate of a rad list view. The above code was my bad attempt to explain what I was attempting to do. below is the working code from the out of template Javascript. The issue I am having is I cannot access the txtName, divEffect1, or divEffect2 because they are in the EditItemTemplate. I do not know the syntax to access and manipulate those elements. Again, I apologize for not showing my initial scenario and greatly appreciate your assistance.

Edit: This code is in a UserControl and I am using JQuery and referencing it properly.

function showPLC() {

var num = $find('<%= txtName.ClientID %>').val();

var bin = num.substring(0, 6);

if (bin == '5774422') {

$find('<%= divEffect1 %>').hide();

$find('<%= divEffect2 %>').slideDown();

} else {

$find('<%= divEffect1 %>').slideDown();

$find('<%= divEffect2 %>').hide();

}

answered on 12 Oct 2010, 08:49 AM

Hi Shane,

Here is a simple demo, which shows a possible approach - you can use the fact that all controls and elements inside the EditItemTemplate share a common naming container - the edit item. So if you have the client ID of the RadTextBox, you can build all other clienti IDs.

By the way, please do not confuse $get() and $find(). The former returns a DOM element, the latter returns an ASP.NET AJAX client control instance. I suspect that divEffect1 is not a client control instance.

http://msdn.microsoft.com/en-us/library/bb397717.aspx

http://msdn.microsoft.com/en-us/library/bb397441.aspx

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" 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">

<script runat="server">

</script>

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

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

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls for ASP.NET AJAX</title>

</head>

<body>

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

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<p style="color:#f00">Press an edit button:</p>

<telerik:RadListView runat="server" ID="RadListView1" DataKeyNames="CategoryID"

DataSourceID="SqlDataSource1">

<AlternatingItemTemplate>

<div class="rlvA">

<asp:Button ID="EditButton" runat="server" CommandName="Edit" CssClass="rlvBEdit"

Text=" " />

<asp:Label ID="CategoryIDLabel" runat="server" Text='<%# Eval("CategoryID") %>' />

<asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />

</div>

</AlternatingItemTemplate>

<EditItemTemplate>

<div class="rlvIEdit">

<asp:Label ID="CategoryIDLabel" runat="server" Text="CategoryID"></asp:Label>

<asp:Label ID="CategoryIDValue" runat="server" Text='<%# Bind("CategoryID") %>' />

<br />

<asp:Label ID="CategoryNameLabel" runat="server" AssociatedControlID="CategoryNameValue"

Text="CategoryName"></asp:Label>

<p style="color:#f00">Clear the textbox value and see what happens:</p>

<telerik:RadTextBox ID="CategoryNameValue" runat="server" Text='<%# Bind("CategoryName") %>'>

<ClientEvents OnLoad="toggleLabelDisplay" OnValueChanged="toggleLabelDisplay" />

</telerik:RadTextBox>

<asp:Label ID="CategoryNameValidationLabel" runat="server" Text="CategoryName is a required field" style="display:none" />

<br />

<asp:Button ID="UpdateButton" runat="server" CommandName="Update" CssClass="rlvBUpdate"

Text=" " />

<asp:Button ID="CancelButton" runat="server" CausesValidation="False" CommandName="Cancel"

CssClass="rlvBCancel" Text=" " />

</div>

</EditItemTemplate>

<ItemTemplate>

<div class="rlvI">

<asp:Button ID="EditButton" runat="server" CommandName="Edit" CssClass="rlvBEdit"

Text=" " />

<asp:Label ID="CategoryIDLabel" runat="server" Text='<%# Eval("CategoryID") %>' />

<asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />

</div>

</ItemTemplate>

<LayoutTemplate>

<div class="RadListView RadListView_Default">

<div id="itemPlaceholder" runat="server">

</div>

</LayoutTemplate>

</telerik:RadListView>

<script type="text/javascript">

function toggleLabelDisplay(sender, args)

{

var labelID = sender.get_id().replace("CategoryNameValue", "CategoryNameValidationLabel");

if (sender.get_value() == "")

$get(labelID).style.display = "";

else

$get(labelID).style.display = "none";

}

</script>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

SelectCommand="SELECT TOP 5 [CategoryID], [CategoryName] FROM [Categories]">

</asp:SqlDataSource>

</form>

</body>

</html>

Regards,
Dimo
the Telerik team

answered on 12 Oct 2010, 03:38 PM

Thank you! The replace function really made the difference. It is working nearly flawlessly.

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

function toggleDisplay(sender, args) {

var div1 = sender.get_id().replace("txtNumber", "div1");

var div2 = sender.get_id().replace("txtNumber", "div2");

var bin = sender.get_value().substring(0, 6);

if (bin == "577442") {

$get(div1).style.display = "";

$get(div2).style.display = "none";

} else {

$get(div1).style.display = "none";

$get(div2).style.display = "";

}

</script>

<telerik:RadTextBox runat="server" ID="txtNumber" Width="150px" Text='<%#Bind("Number")%>'>

<ClientEvents OnLoad="toggleDisplay" OnKeyPress="toggleDisplay" />

</telerik:RadTextBox>

The only issue I am currently having is that the "OnKeyPress" is one key press behind. Meaning if the RadTextBox currently has 577442 the javascript will show that the value is 57744. It is a requirement that the script run correctly when 577442 is entered. I used the "OnValueChanged" but the restriction to that function is the RadTextBox must loose focus. I greatly appreciate your assistance! It has been a tremendous help!

Thank Again!
Shane

answered on 12 Oct 2010, 03:42 PM

Hi Shane,

Key events are fired too early for you to be able to obtain the updated value - you should either use a timeout, or define an interval function once the RadTextBox is focused. The interval function will be stopped once the RadTextBox is blurred.

http://www.w3schools.com/js/js_timing.asp

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

Regards,
Dimo
the Telerik team

answered on 13 Oct 2010, 03:39 PM

Thanks again for all your help, you definitely got me started in the right direction! Below is the final working code. I would assume if your RadListView had more items than one you could just iterate through them based on the count or something similar. Thanks again!

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

var interval_name = 0;

function startInterval(sender, args) {

interval_name = setInterval("toggleDisplay()", 500);

}

function stopInterval() {

clearInterval(interval_name);

}

function toggleDisplay() {

var bin = $find('<%=((RadTextBox)rlvCreditCard.Items[0].FindControl("txtCCNumber")).ClientID%>').get_textBoxValue().substring(0, 6);

if (bin == "577442") {

$find('<%=((RadTextBox)rlvCreditCard.Items[0].FindControl("txtCCCsv")).ClientID%>').disable();

$find('<%=((RadComboBox)rlvCreditCard.Items[0].FindControl("cbxMonth")).ClientID%>').disable();

$find('<%=((RadComboBox)rlvCreditCard.Items[0].FindControl("cbxYear")).ClientID%>').disable();

} else {

$find('<%=((RadTextBox)rlvCreditCard.Items[0].FindControl("txtCCCsv")).ClientID%>').enable();

$find('<%=((RadComboBox)rlvCreditCard.Items[0].FindControl("cbxMonth")).ClientID%>').enable();

$find('<%=((RadComboBox)rlvCreditCard.Items[0].FindControl("cbxYear")).ClientID%>').enable();

}

</script>

<telerik:RadTextBox runat="server" ID="txtCCNumber" Width="150px" Text='<%#Bind("Number")%>'>

<ClientEvents OnFocus="startInterval" OnBlur="stopInterval" />

</telerik:RadTextBox>