Client Click Event

9 posts, 2 answers
  1. Stephen
    Stephen avatar
    16 posts
    Member since:
    Mar 2009

    Posted 25 Aug 2009 Link to this post

    How can I simulate a client-side onClick event for a list item located at the 0 index of the control?  Thanks in advance for assistance.
  2. Answer
    Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 25 Aug 2009 Link to this post

    Hi Stephen Brooker,

    You can use the following client side code to handle the click event of the item with index zero:

    <script type="text/javascript"
            $telerik.$(document).ready(function() { 
                var listBox = $find("RadListBox1"); 
                $telerik.$(".rlbItem:first", listBox.get_element()) 
                    .click(function() { 
                         alert("This is event handler for click on the first item")  
                    }); 
            }); 
             
        </script> 


    Best wishes,
    Genady Sergeev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stephen
    Stephen avatar
    16 posts
    Member since:
    Mar 2009

    Posted 25 Aug 2009 Link to this post

    I am wanting to use the client to raise a simulated click event against the ListBox control.  In other words I want the client to "click" the ListBox control instead of physically using the mouse to click it.  Thanks
  5. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Aug 2009 Link to this post

    Hi Stephen Booker,

    Give a try with following client side code for selecting first item from client side and see whether it is working as you expected.

    JavaScript:
     
    <script type="text/javascript"
    function clickFirstItem() 
        var list = $find("<%= RadListBox1.ClientID %>"); 
        var item = list.getItem(0); // get the first item 
        item.select(); // Select the item 
    </script> 

    Checkout following links for important methods of the client-side RadListBox/RadListBoxItem object:
    RadListBox client API
    RadListBoxItem client API

    -Shinu.
  6. Stephen
    Stephen avatar
    16 posts
    Member since:
    Mar 2009

    Posted 26 Aug 2009 Link to this post

    This worked fine.  Thanks for the help.
  7. Jerry
    Jerry avatar
    4 posts
    Member since:
    Sep 2012

    Posted 06 Sep 2012 Link to this post

    In response to the first Answer by Genady Sergeev

    This works good, and I'm able to have it fire for all items in a list box by removing :first. 

    Is there a way to attach this event to every listbox on a page without replicating the function and to pass as an argument which listbox was clicked?

    thanks
  8. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 10 Sep 2012 Link to this post

    Hi Jerry,

     
    You can add this functionality in the OnClientLoad function of each RadListBox as in the code below:

    function OnClientLoadHandler(sender, args) {
                var listBox = sender;
                $telerik.$(".rlbItem:first", listBox.get_element())
                    .click(function() {
                        alert("This is event handler for click on the first item")
                    });
            }
    <telerik:RadListBox runat="server" ID="RadListBox1" OnClientLoad="OnClientLoadHandler">
           <Items>
               <telerik:RadListBoxItem Text="aaa" />
           </Items>
       </telerik:RadListBox>
       <telerik:RadListBox runat="server" ID="RadListBox2" OnClientLoad="OnClientLoadHandler">
           <Items>
               <telerik:RadListBoxItem Text="aaa" />
           </Items>
       </telerik:RadListBox>

    Hope this will be helpful.

    All the best,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Jerry
    Jerry avatar
    4 posts
    Member since:
    Sep 2012

    Posted 04 Oct 2012 Link to this post

    This is working well, thanks.

    I am adding items to the listbox client-side, but am unable to get this event attached to the new items.  I've tried creating a new item and cloning an existing item (that the click event works for).  And I've tried add and insert. 

    Is there a way to add an item client-side with the event attached to it?

    , Jerry
  10. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 09 Oct 2012 Link to this post

    Hi Jerry,

     
    You can use jQuery and the following code in order to add click event to the new items:

    function OnClientClicked(sender, args) {
                 var listBox = $find('<%= RadListBox2.ClientID %>');
                 var item = new Telerik.Web.UI.RadListBoxItem();
                 item.set_text("Item Text");
                 listBox.get_items().add(item);
                 $telerik.$(item.get_element()).click(function() {
                     alert("This is event handler for click on the NEW item")
                 });
             }

    Hope this will be helpful.

    Kind regards,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017