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.
Thank you for your time!
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
0
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
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
0

Shane
Top achievements
Rank 1
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.
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();
}
}
0
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
Regards,
Dimo
the Telerik team
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"
<
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
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
0

Shane
Top achievements
Rank 1
answered on 12 Oct 2010, 03:38 PM
Thank you! The replace function really made the difference. It is working nearly flawlessly.
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
<
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
0
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
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
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
0

Shane
Top achievements
Rank 1
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
>