
Andrew Putnam
Top achievements
Rank 1
Andrew Putnam
asked on 24 Feb 2009, 07:45 PM
I have been trying to track down a problem that I've been having with Internet Explorer not scrolling to the selected item in a multi-column RadComboBox.
Here is the control declaration I am using inside a Web User Control that is bound to a custom :
<telerik:RadComboBox |
ID="CurrencyEdit" |
runat="server" |
SkinID="CustomBorderedComboBox" |
AllowCustomText="false" |
CssClass="currencyControl" |
HighlightTemplatedItems="true" |
MarkFirstMatch="true" |
OnSelectedIndexChanged="CurrencyEdit_SelectedIndexChanged"> |
<HeaderTemplate> |
<ul> |
<li class="col1">ISO Code</li> |
<li class="col2">Name</li> |
</ul> |
</HeaderTemplate> |
<ItemTemplate> |
<ul> |
<li class="col1"><%# DataBinder.Eval( Container, "Text" )%></li> |
<li class="col2"><%# DataBinder.Eval( Container, "Attributes['Name']" )%></li> |
</ul> |
</ItemTemplate> |
</telerik:RadComboBox> |
I am binding this directly in codebehind to a custom object with this:
var binder = new CurrencyBinder(); |
var currencies = binder.Get(); |
currencies.Sort("ISOCode", System.ComponentModel.ListSortDirection.Ascending); |
var totalCurrencies = currencies.Count; |
for (int i = 0; i < totalCurrencies; i++) |
{ |
var currency = currencies[i]; |
var item = new RadComboBoxItem(currency.ISOCode, currency.ISOCode); |
item.Attributes.Add("Name", currency.Name); |
this.CurrencyEdit.Items.Add(item); |
} |
if (this.CurrencyEdit.Items.Count > 0) |
{ |
this.CurrencyEdit.DataBind(); |
} |
Here is the result for each browser. Note that IE does select the correct item, it just doesn't scroll it to the top like FireFox is doing.
FireFox Scrolling Properly:
Internet Explorer Not Scrolling Properly:
Any advice on how to fix this?
5 Answers, 1 is accepted
0
Hello Andrew,
I don't understand completely the situation, please explain in more details how you select USD value and when exactly the scrolling happens in Firefox. You can send us steps to reproduce the issue.
Kind regards,
Yana
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
I don't understand completely the situation, please explain in more details how you select USD value and when exactly the scrolling happens in Firefox. You can send us steps to reproduce the issue.
Kind regards,
Yana
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0

Andrew Putnam
Top achievements
Rank 1
answered on 26 Feb 2009, 06:22 PM
Firefox automatically scrolls the drop down to the selected value when opening. IE has the value selected, but it does not scroll to it.
This only seems to occur with a multi-column control we have that inherits from RadComboBox that keys on the ISO code for the currency. Here is the full source of the custom control:
This only seems to occur with a multi-column control we have that inherits from RadComboBox that keys on the ISO code for the currency. Here is the full source of the custom control:
using System; |
using System.Collections.Generic; |
using System.ComponentModel; |
using System.Text; |
using System.Web; |
using System.Web.UI; |
using System.Web.UI.WebControls; |
using System.Web.UI.HtmlControls; |
using FilmTrack.Avails.Core; |
using FilmTrack.Avails.UI.Controllers; |
using Telerik.Web.UI; |
namespace FilmTrack.Avails.UI.Controls.ServerControls |
{ |
[DefaultProperty("Text")] |
[ToolboxData("<{0}:CurrencyRadComboBox runat=server></{0}:CurrencyRadComboBox>")] |
public class CurrencyRadComboBox : RadComboBox |
{ |
private string _dropDownWidth = "300px"; |
private string _height = "200px"; |
private string _width = "55px"; |
public override string SelectedValue |
{ |
get |
{ |
Currency currency = this.SelectedCurrency; |
return currency == null ? null : currency.ISOCode; |
} |
set |
{ |
base.SelectedValue = value; |
} |
} |
public Currency SelectedCurrency |
{ |
get |
{ |
var selectedValue = base.SelectedValue; |
if (string.IsNullOrEmpty(selectedValue)) |
{ |
if (!string.IsNullOrEmpty(base.Text)) |
selectedValue = base.Text; |
else |
return null; |
} |
if (selectedValue.Equals(SystemSetting.BaseCurrency.ISOCode, |
StringComparison.InvariantCultureIgnoreCase)) |
return SystemSetting.BaseCurrency; |
var currency = new Currency(); |
if (!currency.Get(selectedValue)) |
throw new ApplicationException(string.Format(Resources.AvailsResources.CannotFindItem |
, typeof(Currency), selectedValue)); |
return currency; |
} |
set |
{ |
base.SelectedValue = value == null ? null : value.ISOCode; |
base.Text = base.SelectedValue; |
} |
} |
protected override void OnInit(EventArgs e) |
{ |
base.HeaderTemplate = new CurrencyHeaderTemplate(); |
base.ItemTemplate = new CurrencyItemTemplate(); |
base.OnInit(e); |
this.Text = SystemSetting.BaseCurrency.ISOCode; |
if (base.Items.Count > 0) |
base.SelectedValue = SystemSetting.BaseCurrency.ISOCode; |
} |
protected override void OnItemDataBound(RadComboBoxItemEventArgs e) |
{ |
base.OnItemDataBound(e); |
} |
protected override void OnLoad(EventArgs e) |
{ |
base.OnLoad(e); |
BindData(); |
if (string.IsNullOrEmpty(this.SelectedValue)) |
{ |
base.SelectedValue = SystemSetting.BaseCurrency.ISOCode; |
} |
else |
{ |
base.SelectedValue = this.SelectedValue; |
} |
} |
protected override void OnPreRender(EventArgs e) |
{ |
base.OnPreRender(e); |
if (base.DropDownWidth.IsEmpty) |
{ |
base.DropDownWidth = new Unit(this._dropDownWidth); |
} |
if (base.Height.IsEmpty) |
{ |
base.Height = new Unit(this._height); |
} |
if (base.Width.IsEmpty) |
{ |
base.Width = new Unit(this._width); |
} |
} |
private void BindData() |
{ |
base.DataSource = null; |
var binder = new CurrencyBinder(); |
var currencies = binder.Get(); |
currencies.Sort("ISOCode", ListSortDirection.Ascending); |
var totalC = currencies.Count; |
if (totalC > 0) |
{ |
var collection = new RadComboBoxItem[totalC]; |
for (int i = 0; i < totalC; i++) |
{ |
var currency = currencies[i]; |
var item = new RadComboBoxItem(currency.ISOCode, currency.ISOCode); |
item.Attributes.Add("Name", currency.Name); |
collection[i] = item; |
} |
this.DataSource = collection; |
this.DataTextField = "text"; |
this.DataValueField = "value"; |
this.DataBind(); |
} |
} |
} |
/// <summary> |
/// Private Header template class for the CurrencyRadComboBox |
/// </summary> |
class CurrencyHeaderTemplate : ITemplate |
{ |
public void InstantiateIn(Control container) |
{ |
var header = "<ul><li class=\"col1\">ISO Code</li><li class=\"col2\">Name</li></ul>"; |
container.Controls.Add(new LiteralControl(header)); |
} |
} |
/// <summary> |
/// Private Item template class for the CurrencyRadComboBox |
/// </summary> |
class CurrencyItemTemplate : ITemplate |
{ |
const string head = "<ul>"; |
const string col1 = "<li class=\"col1\">{0}</li>"; |
const string col2 = "<li class=\"col2\">{0}</li>"; |
const string tail = "</ul>"; |
public void InstantiateIn(Control container) |
{ |
var col1Literal = new LiteralControl(); |
var col2Literal = new LiteralControl(); |
container.Controls.Add(new LiteralControl(head)); |
col1Literal.DataBinding += new EventHandler(col1Literal_DataBinding); |
container.Controls.Add(col1Literal); |
col2Literal.DataBinding += new EventHandler(col2Literal_DataBinding); |
container.Controls.Add(col2Literal); |
container.Controls.Add(new LiteralControl(tail)); |
} |
private void col1Literal_DataBinding(object sender, EventArgs e) |
{ |
var target = (LiteralControl)sender; |
RadComboBoxItem item = (RadComboBoxItem)target.BindingContainer; |
string itemText = (string)DataBinder.Eval(item, "text"); |
target.Text = string.Format(col1, itemText); |
} |
private void col2Literal_DataBinding(object sender, EventArgs e) |
{ |
var target = (LiteralControl)sender; |
RadComboBoxItem item = (RadComboBoxItem)target.BindingContainer; |
string itemText = (string)DataBinder.Eval(item, "Attributes['Name']"); |
target.Text = string.Format(col2, itemText); |
} |
} |
} |
0
Hi Andrew,
I tested the code and still wasn't able to replicate this issue, the dropdown is scrolled and the selected item is visible in IE. I've attached a screenshot to show you how it looks, some styles are missing, but the selected "US" value is shown.
Best regards,
Yana
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
I tested the code and still wasn't able to replicate this issue, the dropdown is scrolled and the selected item is visible in IE. I've attached a screenshot to show you how it looks, some styles are missing, but the selected "US" value is shown.
Best regards,
Yana
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0

Andrew Putnam
Top achievements
Rank 1
answered on 27 Feb 2009, 06:24 PM
Updating to the latest build (2008.3.1314.35) did appear to fix the issue for the most part. It still doesn't push it to the top of the visible list for me, but it does at least have it in the visible range now.
IE after updating.
IE after updating.

0
Hi Andrew Putnam,
You can try with our Q1 2009 Beta version. It behaves properly on our online demo.
Kind regards,
Veselin Vasilev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
You can try with our Q1 2009 Beta version. It behaves properly on our online demo.
Kind regards,
Veselin Vasilev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.