Select Row When Clicking CheckBox

5 posts, 0 answers
  1. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 28 Mar 2011 Link to this post

    Happy Monday, everyone!

    Our users have requested that when we use the RadListBox with CheckBoxes that when they click on a checkbox that the entire row become focused - like it does when they click on the text of a row.

    I've tried setting focus manually in the ItemChecked event with the following but no matter what I do I can't get this accomplished.

    Anyone managed to get this working?

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 29 Mar 2011 Link to this post

    Hello Thad,

    Give a try with following code, which worked fine for me.

    Client code:
    var item;
    function OnClientItemChecked(sender, args) {
        item = args.get_item();;
        setTimeout("item.get_element().focus();", 1000);

    Have a nice day . :)

  3. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 23 Apr 2011 Link to this post

    Hey Princy,

    Sorry for taking so long to respond back to this, but unfortunately that didn't work for me.  For brevity's sake I didn't include include something that ended up being very important.

    My RadListBox is inside of the ItemTemplate of a RadComboBox.  The situation is that there are maybe 100 items in the RLB but the height of the RCB is only 200px.  When the users scrolls down to the end of the list and checks an item the RLB scrolls back up to the top because focus is still on the first item in it.

    After further research I determined the problem is that I set a MaxHeight of 200px on the RCB.  Since the RLB was 500px+ high I needed to shrink it down so that it would fit into the RCBItem viewport.  Once that was done the RLB stopped jumping around as it was before, but I ran into the same situation that others did -- I had scroll bars on both the RLB and RCB.  I implemented the appropriate CSS to enable me to hide the scrollbars in the RadListBox, so now things are working as I want.  The row the user checked on still does not get focus, but at least the item they checked is still visible after checking it.

    I have one outstanding issue.  Because the MaxHeight of the RCB is set to 200px and I don't know how many Items will be in the RLB, I'm manually setting the RLB height to 170px.  But when there are not enough items to fill that 170px I would like to reduce that height.

    I'll open a new post for that question, but if you have any thoughts that would be awesome!

  4. Peter Filipov
    Peter Filipov avatar
    1028 posts

    Posted 27 Apr 2011 Link to this post

    Hello Thad,

    My suggestion is to check how many items you have into the RadListBox control(e.g. $find("RadListBox1").get_items().get-count() ) and calculate what is the approximate height of the list(number of items multiplied by relative height of the item).
    You can use the following code to manipulate the height of the RadListBox:

    document.getElementById("RadListBox1").style.height = "100px";

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

  5. Thad
    Thad avatar
    106 posts
    Member since:
    Sep 2010

    Posted 27 Apr 2011 Link to this post

    Hi Peter,

    I was able to solve this problem and documented the solution in the following post:

    Thanks for your input!
Back to Top