Getting control in a listview via JavaScript

2 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
    1045 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. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top