This is a migrated thread and some comments may be shown as answers.
RadListBoxItem onblur & onfocus
3 Answers 72 Views
This is a migrated thread and some comments may be shown as answers.
Kent
Top achievements
Rank 1
Kent asked on 26 Aug 2009, 08:42 PM
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

3 Answers, 1 is accepted

Sort by
0
Genady Sergeev
Telerik team
answered on 28 Aug 2009, 02:55 PM
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.
0
Kent
Top achievements
Rank 1
answered on 28 Aug 2009, 06:26 PM
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 );  
 

 

0
Genady Sergeev
Telerik team
answered on 04 Sep 2009, 07:36 AM
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.
Asked by
Kent
Top achievements
Rank 1
Answers by
Genady Sergeev
Telerik team
Kent
Top achievements
Rank 1
Share this question
or