Select Row When Clicking CheckBox

[Thad]

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.

event.get_item().select();
event.get_item().get_element().focus();

Anyone managed to get this working?

Thanks!
Thad

[Princy]

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();
    item.select();
    setTimeout("item.get_element().focus();", 1000);
}

Have a nice day . :)

Thanks,
Princy.

[Thad]

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!

Thanks!
Thad

[Peter Filipov]

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";

Regards,
Peter Filipov
the Telerik team

[Thad]

Hi Peter,

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

http://www.telerik.com/community/forums/aspnet-ajax/listbox/set-radlistbox-max-height.aspx

Thanks for your input!
-Thad