RadListBoxItem onblur & onfocus

[Kent]

Is there a way to be able to set the onblur and onfocus events of the items in the radlistbox? 

Essentially, my goal is to be able to capture on the entire onblur event of the RadListBox.  I noticed when i added the onblur to the listbox, it fired when i was going through the items in the list.  Also, a suggestion is that the behavior I've observed really shouldn't be the radlistbox onblur since the control is somewhat of a package deal to the oblivious developer.

Thanks,
sash

[Genady Sergeev]

Hello Kent Mitchell,

You can attach blur and focus to the group element that holds RadListBoxItems as long as you set the TabIndex property of RadListBox.. Take a look at the following sample code:

[JavaScript]

<script type="text/javascript">
        function pageLoad() {
            var listBox = $find("RadListBox1");

            $(listBox._getGroupElement()).blur(function() {
                alert('asdf');
            });

            $(listBox._getGroupElement()).focus(function() {
                alert("focus");
            });
        }
    </script>

[markup]

<telerik:RadListBox runat="server" ID="RadListBox1" TabIndex="1">
        <Items>
            <telerik:RadListBoxItem runat="server" Text="RadListBoxItem1" />
        </Items>
    </telerik:RadListBox>

In general, blur and focus are fired only for inputs, a and p. If you want to have blur/focus on div, you need to set a tabindex to it. It worth mentioning that blur and focus do not bubble. A good article on the topic can be found here.

Best wishes,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Kent]

I must be missing something still because the events are still not firing after I added the suggested code (of course, replacing the " with ' in the focus event).

I was also unable to get the code to work with the $ around listBox._getGroupElement(). 

This is what I have, the javascript (below), in the aspx page, is firing (to attach the focus & blur events) but i'm not getting any alerts:

ASPX page:

 

 

var listbox = $find(lst.id);




listbox._getGroupElement().focus(



function() { alert('group focus'); });


listbox._getGroupElement().blur(



function() { alert('group blur'); });

.cs Page (as you can see, i'm creating the control(s) dynamically on a table within a div):



 

HtmlGenericControl


div = new HtmlGenericControl("div");


div.ID = "data_f" + rowSchema[ "DDID" ].ToString().Trim() + "t" + rowSchema[ "TabID" ].ToString().Trim() + "l" + rowSchema[ "LookupTableID" ].ToString().Trim();


div.Attributes[ "onkeydown" ] = "return ListBoxList_BlockScroll( event.keyCode );";


div.Style[ "overflow" ] = "auto";


div.Attributes["tabindex"] = "-1";

HtmlTable htmltable = new HtmlTable();

HtmlTableRow htmltr = new HtmlTableRow();


HtmlTableCell htmltd = new HtmlTableCell("td");


htmltd.ID = "ms_td_f" + rowSchema["DDID"].ToString().Trim() + "t" + rowSchema["TabID"].ToString().Trim();


htmltd.Style["display"] = "none";


htmltd.VAlign = "Middle";




//create listbox and add it into where the old checkbox hack was
RadListBox lst = new RadListBox();


lst.CheckBoxes = true;

lst.ID = sIDBase + "_ddl";


lst.Attributes.Add("style", "WIDTH: 300px; Z-INDEX: 200; POSITION: absolute; BORDER: black solid 1px; ");


lst.Attributes.Add("align", "middle");

htmltd.Controls.Add(lst);

htmltr.Cells.Add( htmltd );

htmltable.Rows.Add( htmltr );

div.Controls.Add( htmltable );

sID = rmpPatRec.ClientID + "_" + div.ID;


cellCtrl.Controls.Add( div );

 

[Genady Sergeev]

Hello Kent Mitchell,

Please excuse us for the late answer.

It is my fault, It seems that when copy/pasting I have missed a line, without with the code is not working. The correct version of the sample code is as below:

  function pageLoad() {
            var listBox = $find("RadListBox1");
            var $ = $telerik.$;
            $(listBox._getGroupElement()).blur(function() {
                alert('blur');
            });

            $(listBox._getGroupElement()).focus(function() {
                alert("focus");
            });
        }

The missing line is var $ = $telerik.$;.

I hope this will help you to get started.

Best wishes,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.