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

Getting control in a listview via JavaScript

3 Answers 156 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Sam Bronchetti
Top achievements
Rank 1
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

Sort by
0
Marin
Telerik team
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.

0
Krina
Top achievements
Rank 1
answered on 01 Apr 2019, 02:43 PM

I was facing issue  var total = $find("<%= txttotal.ClientID %>"); in this line I was getting null in total variable, Your solution helped me a lot and it solved my problem.

 var total = $telerik.findControl(grid.get_element().parentNode, "txttotal"); I have used this solution .

Thanks a lot..

0
Peter Milchev
Telerik team
answered on 02 Apr 2019, 12:38 PM
More information on the various approaches to obtain a client-side object reference can be found here: Get Client-side Reference to a Control Object

Regards,
Peter Milchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ListView
Asked by
Sam Bronchetti
Top achievements
Rank 1
Answers by
Marin
Telerik team
Krina
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or