This is a migrated thread and some comments may be shown as answers.

Scroll to selected problem in IE7

5 Answers 114 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
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:
Firefox Scrolling Correctly

Internet Explorer Not Scrolling Properly:
Internet Explorer NOT Scrolling Correctly


Any advice on how to fix this?

5 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 26 Feb 2009, 01:04 PM
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.
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:

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
Yana
Telerik team
answered on 27 Feb 2009, 01:02 PM
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.
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.
Internet Explorer after Update
0
Veselin Vasilev
Telerik team
answered on 02 Mar 2009, 04:00 PM
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.
Tags
ComboBox
Asked by
Andrew Putnam
Top achievements
Rank 1
Answers by
Yana
Telerik team
Andrew Putnam
Top achievements
Rank 1
Veselin Vasilev
Telerik team
Share this question
or