ListView Javascript

7 posts, 0 answers
  1. Shane
    Shane avatar
    8 posts
    Member since:
    Aug 2010

    Posted 06 Oct 2010 Link to this post

    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.

    <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!
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 07 Oct 2010 Link to this post

    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
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shane
    Shane avatar
    8 posts
    Member since:
    Aug 2010

    Posted 07 Oct 2010 Link to this post

    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.

    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();
     
            }
             
        }
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 12 Oct 2010 Link to this post

    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


    <%@ 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>
     
    <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
  6. Shane
    Shane avatar
    8 posts
    Member since:
    Aug 2010

    Posted 12 Oct 2010 Link to this post

    Thank you! The replace function really made the difference. It is working nearly flawlessly.
    <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
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 12 Oct 2010 Link to this post

    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
    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
  8. Shane
    Shane avatar
    8 posts
    Member since:
    Aug 2010

    Posted 13 Oct 2010 Link to this post

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