Getting control in a listview via JavaScript

4 posts, 0 answers
  1. Sam Bronchetti
    Sam Bronchetti avatar
    12 posts
    Member since:
    Sep 2012

    Posted 29 Jun 2011 Link to this post

    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?
  2. Marin
    Admin
    Marin avatar
    1057 posts

    Posted 05 Jul 2011 Link to this post

    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.

  3. Krina
    Krina avatar
    2 posts
    Member since:
    Apr 2019

    Posted 01 Apr 2019 in reply to Marin Link to this post

    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..

  4. Peter Milchev
    Admin
    Peter Milchev avatar
    880 posts

    Posted 02 Apr 2019 Link to this post

    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.
Back to Top