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
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
0
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]
[markup]
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.
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> |
<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:
.cs Page (as you can see, i'm creating the control(s) dynamically on a table within a div):
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
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:
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.
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.