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

Getting control in a listview via JavaScript

3 Answers 533 Views

ListView

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

Sam Bronchetti asked on 29 Jun 2011, 08:18 PM

I apologize if this has been answered elsewhere. I have what, I think, is a simple problem. I am trying to access one of the controls in the LayoutTemplate of a RadListView via javascript. Here is the ListView code:

<telerik:RadListView ID="rlvApproval" runat="server">

<LayoutTemplate>

<table>

<tr>

<td style="width: 250px;">

</td>

<td style="width: 200px; font-weight: bold;">

</td>

</tr>

</table>

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

<table>

<tr>

<td style="width: 250px;">

<asp:Label ID="lblName" runat="server" Text="Total" Font-Bold="true" />

</td>

<td style="width: 200px; font-weight: bold;">

<telerik:RadNumericTextBox ID="txtTotalValue" runat="server" ReadOnly="true" DataType="System.Decimal"

Skin="Web20">

<NumberFormat DecimalDigits="0" />

</telerik:RadNumericTextBox>

</td>

</tr>

</table>

</LayoutTemplate>

<ItemTemplate>

<table>

<tr>

<td style="width: 250px;">

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

</td>

<td style="width: 250px;">

<telerik:RadNumericTextBox ID="txtValue" runat="server" DataType="System.Decimal"

Skin="Web20" DbValue='<%# DataBinder.Eval(Container.DataItem, "value") %>' MaxValue="100"

MinValue="0" AutoPostBack="false" >

<NumberFormat DecimalDigits="0" />

<ClientEvents OnValueChanged="ValidateWeighting" />

</telerik:RadNumericTextBox>

</td>

</tr>

</table>

</ItemTemplate>

<EmptyDataTemplate>

<div class="message">

<asp:Label ID="lblEmptyMessage" runat="server" SkinID="messageBig" Text="Error loading approval information..." />

</div>

</EmptyDataTemplate>

</telerik:RadListView>

Whenever the txtValue is updated, I fire a javascript function to determine if the values are 100% based on the current total value that is set in the codebehind. Here is the code I have that is working:

function ValidateWeighting(sender, eventArgs) {

var object = document.getElementById('ctl00_ContentPlaceHolder1_Weighting1_rlvApproval_txtTotalValue_text');

var object2 = document.getElementById('<%= rlvApproval.ClientID %>');

var current = eval(object.value);

var old = eventArgs.get_oldValue();

var newval = eventArgs.get_newValue();

var tmp = current + (newval - old);

if (tmp == 100) {

document.getElementById('<%= btnSave.ClientID %>').disabled = false;

}

else {

document.getElementById('<%= btnSave.ClientID %>').disabled = true;

}

object.value = tmp;

}

However, The id to get the object for the txtTotalValue control was obtained through "View Source". What I am looking for is the right way to do this that avoids browser differences, web server differences, etc.
Any thoughts?

3 Answers, 1 is accepted

answered on 05 Jul 2011, 10:13 AM

Hi Sam,

You can use the $telerik.findControl method passing as first argument an html element containing the text box that you need to find, and the server ID of the text box. You can change the client-side code in the following way:

function ValidateWeighting(sender, eventArgs)

{

var listView = $find('<%= rlvApproval.ClientID %>');

//depending on the structure of youe page you might pass a more appropriate html element that contains the textbox

var txbClientObject = $telerik.findControl(listView.get_element().parentNode, "txtTotalValue").get_value()

var current = txbClientObject.get_value();

var old = eventArgs.get_oldValue();

var

newval = eventArgs.get_newValue();

                       ....

Greetings,
Marin
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.