RadListBox - OnFocus and OnBlur

[Sean]

Hi Telerik,

Could I please have an example where the 'OnFocus' and 'OnBlur' events are successfully called after being applied to a RadListBox? I've tried numerous different approaches and none of them seem to work.

Sean

EDIT: Had to set the TabIndex property per HTML5 documentation -- http://www.w3.org/TR/html5/editing.html#attr-tabindex

EDIT2: Okay, so after playing around with this for a bit, I'm still not quite where I would like to be. I would like to attach a blur event to a dynamically created RadListBoxItem.

var listboxItem = radListBox.get_selectedItem();

$(listboxItem.get_element()).blur(function () {
    console.log("Item blurred.");
});

doesn't fire anything. What's the proper procedure?

EDIT3: So I've got something that works (mostly) but I'm not happy with... I can already think of one scenario it won't work in, in fact, but I figured I'd update.

So, the RadListBox's OnClientSelectedIndexChanged event seemed like a good place to start. I came to the conclusion that there's proooobably not a good way to set the focus to a RadListBoxItem. So, I've got this:

function OnClientSelectedIndexChanged(sender, eventArgs) {
    console.log("ClientSelectedIndexChanged");
    $telerik.$(radListBox1._getGroupElement()).focus();

which will set focus to the radListBox responsible for the OnClientSelectedIndexChanged event. Unfortunately, this isn't quite sufficient for my purposes.

My goal is this:

I have a button on the page which has two states: 'Edit Text' or 'Add Item'. When a RadListBoxItem is focused I want the button to say 'Edit Text'. When the user clicks away from that item I want it to say 'Add Item.' The above code will work for some scenarios, but consider the following:

• User has a RadListBox with room for 4 RadListBoxItems to be displayed.
• The RadListBox contains only 2 RadListBoxItems.
• The user selects the first RadListBoxItem. OnSelectedIndexChanged fires, and the jquery sets the RadListBox to focused.
• The user then clicks on a blank area of the RadListBox. Since the object is focused -- this doesn't change anything, but it 'feels' like to the user like they've clicked away from the item. Hence, the button should say 'Add Item'.

Ideally in that scenario I would deselect the item after detecting the blur event, but without the RadListBox blurring this is impossible...

Any advice on how to improve this design would be appreciated. Thanks.

[Dimitar Terziev]

Hello Sean,

I've prepared a sample page showing how to achieve the desired functionality.

I hope this would help you out.

Regards,
Dimitar Terziev
the Telerik team

[Sean]

Hi Dimitar,

Thank you for the example you provided. While this example did not work right out of the box, it was sufficient enough to figure out how to achieve my desired result. I will explain.

In the code provided: 

function OnClientLoad(sender){

    $(sender.get_element()).bind('click', function (e) {

        if($(e.target).hasClass('rlbList')) {

            document.getElementById("TextBox1").value = "Add Item";
            $(".rlbSelected",sender.get_element()).removeClass(" rlbSelected").removeClass("rlbActive");
        }
        else {

            document.getElementById("TextBox1").value = "Edit Item";
        }
    });
}

This method was bound to the RadListBox OnLoad event. This would provide the functionality of being able to tell when the blank area of the RadListBox is clicked vs the RadListBoxItem area. Unfortunately, this is not quite what I was after. I was hoping to be able to tell when a RadListBoxItem was clicked vs other area on the screen. Luckily, this is quite easy to change. 

Here is what I did:

$(document).ready(function () {

    $('#GlobalSettingsDecorationZone').click(function (e) {
           var target = $(e.target);

        if (target.hasClass('rlbItem') || target.hasClass('rlbText')) {

            radButton2.set_text("Rename Tab");

        }

        else {

            ChangeToAddTab();

        }

    });

});

In this way, if you select the RadListBoxItem, the user is told they are able to rename the RadListBoxItem. If they click anywhere else on the dialog window, though, the button will change back to being unable to edit. 

Thank you for your assistance. Sometimes its just too easy to go down the wrong path in Javascript. :)