RadComboBox, Firefox and page refreshing

11 posts, 0 answers
  1. Nathan
    Nathan avatar
    8 posts
    Member since:
    Oct 2011

    Posted 28 Jan 2014 Link to this post

    Hi. Got an interesting issue here. I am performing a cascading drop down set of controls using comboboxes. If the browser is refreshed (either through F5 or the refresh button) in FF after the first combobox has made a selection, the first combobox will retain it's selection while IE11 and Chrome will reset to initial load settings. This example also uses RadAjaxManager and RadAjaxManagerProxy to simulate the real world problem I am having where the user control with the comboboxes is using the proxy object.
    HTML:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FF_Combobox_Test.aspx.cs" Inherits="testwebapplication.FF_Combobox_Test" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="scriptmanager" runat="server"></telerik:RadScriptManager>
            <div>
                <telerik:RadAjaxManager ID="ajaxmanager" runat="server"></telerik:RadAjaxManager>
                <telerik:RadAjaxManagerProxy ID="proxy" runat="server">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="FirstBox">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="SecondBox" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManagerProxy>
                <telerik:RadComboBox ID="FirstBox" runat="server" AutoPostBack="true"
                    OnSelectedIndexChanged="FirstBox_SelectedIndexChanged" CausesValidation="false">
                </telerik:RadComboBox>
                <telerik:RadComboBox ID="SecondBox" runat="server" EnableLoadOnDemand="true" EnableVirtualScrolling="true" AllowCustomText="true"
                    AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged" EmptyMessage="TEST TIME!" CausesValidation="false"
                    OnItemsRequested="RadComboBox1_ItemsRequested">
                </telerik:RadComboBox>
     
            </div>
        </form>
    </body>
    </html>

    Code-Behind:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    namespace testwebapplication
    {
        public partial class FF_Combobox_Test : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (IsPostBack) return;
                List<string> testlist = new List<string>();
                testlist.Add("Americas");
                testlist.Add("Asia");
                testlist.Add("Europe");
                FirstBox.DataSource = testlist;
                FirstBox.DataBind();
            }
     
            protected void RadComboBox1_SelectedIndexChanged(object sender, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
            {
     
            }
     
            protected void RadComboBox1_ItemsRequested(object sender, Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs e)
            {
                List<string> testlist;
                switch (FirstBox.SelectedItem.Text)
                {
                    case "Americas":
                        testlist = AmericasList();
                        break;
                    case "Asia":
                        testlist = AsiaList();
                        break;
                    case "Europe":
                        testlist = EuropeList();
                        break;
                    default:
                        testlist = new List<string>();
                        break;
                }
     
                foreach (string item in testlist)
                {
                    SecondBox.Items.Add(new Telerik.Web.UI.RadComboBoxItem(item));
                }
            }
     
            protected void FirstBox_SelectedIndexChanged(object sender, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
            {
                SecondBox.Text = String.Empty;
                SecondBox.DataBind();
            }
     
     
            private List<string> AmericasList()
            {
                List<string> test = new List<string>();
                test.Add("AMERICA1");
                test.Add("AMERICA2");
                test.Add("AMERICA3");
                return test;
            }
     
            private List<string> AsiaList()
            {
                List<string> test = new List<string>();
                test.Add("ASIA1");
                test.Add("ASIA2");
                test.Add("ASIA3");
                return test;
            }
     
            private List<string> EuropeList()
            {
                List<string> test = new List<string>();
                test.Add("EUROPE1");
                test.Add("EUROPE2");
                test.Add("EUROPE3");
                return test;
            }
        }
    }

    I should also note that after the page is refreshed, if the second combobox is opened, it will fire the first combobox's selectionchanged event.

    Any clue what its doing, what I may be doing wrong and if this is a real bug?

    Also, this is using v2013.2.611.45.

    Thanks!
  2. Nathan
    Nathan avatar
    8 posts
    Member since:
    Oct 2011

    Posted 28 Jan 2014 in reply to Nathan Link to this post

    I see no way to edit a post so I'm adding a little extra info here:
    if you use FF and go to your own demo site here: http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx , it will act just as I described in my original post.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Jan 2014 in reply to Nathan Link to this post

    Hi Nathan,

    As a work around please try the following JavaScript which works fine at my end.

    JavaScript:
    <script type="text/javascript">
        window.onbeforeunload = closeIt;
        function closeIt() {
            var combo = $find("<%=FirstBox.ClientID %>");
            combo.findItemByText("Americas").select();
        }
    </script>

    From your code I have noticed that you are giving both RadAjaxManager and RadAjaxManagerProxy, no need of these two in one page because both controls working is same. Normally we use RadAjaxManagerProxy for complex scenario like WebuserControl or Master/Content Page.

    Thanks,
    Shinu.
  5. Nathan
    Nathan avatar
    8 posts
    Member since:
    Oct 2011

    Posted 11 Feb 2014 in reply to Shinu Link to this post

    Hi and thanks for the response. Sorry I am replying so late.

    So I did not try the work around, which I assume by virtue of providing a work around that this is a real issue. I discovered that in my real world situation, I had to move an ajaxsetting for a button *above* or first in the series of ajaxsettings and then everything would work as intended. And then I saw your response but never bothered to go back. If it comes up again, and I have no choice but to keep it as the first ajaxsetting I'll use your workaround.
    That said, I also understand that using a manager and managerproxy in the same page is incorrect. As I stated in my original post, I was attempting to replicate the real world situation without having to go through and provide master pages in my post. But thanks for ensuring that this was called out just in case.
    If you have any input on why moving an unrelated ajaxsetting to the first spot in the series, I'd be happy to know.
    Thanks!
  6. Eirik H
    Eirik H avatar
    36 posts
    Member since:
    Mar 2010

    Posted 26 Mar 2014 Link to this post

    This also happens in less complex scenarios such as: http://demos.telerik.com/aspnet-ajax/combobox/examples/configurator/defaultcs.aspx . I've submitted a bug report about this as well: #802796

    This is a serious bug as our users believe they are editing an item that is not really selected.
  7. Eirik H
    Eirik H avatar
    36 posts
    Member since:
    Mar 2010

    Posted 27 Mar 2014 in reply to Eirik H Link to this post

    This is a joke. Telerik is concidering it "browser behavior" that our users may end up seeing a different item selected than what it actually is, asking us (and our users) to use Ctrl+F5 instead. This is not what I have come to expect from Telerik.
  8. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 31 Mar 2014 Link to this post

    Hello,

    I would like to clarify that I replicated the described behavior and it seems that this is due to the fact that clicking F5 does not clear the form values in  FF. When user clicks on F5 it does refresh so the RadComboBox goes back to its initial state. This is why in the Page_Load or Page_PreRender the RadComboBox SelectedIndex is the default value - it returns -1 in case of using EmptyMessage or 0 if the first item is selected by default. As I mentioned on the page the input field remains the last selected text value since the FF does not clear the form values when only F5 is pressed.

    Please note that an easy and convenient way of avoiding this behavior is to stop cashing functionality if the browser is non IE ( this includes the FF). Please find here some more information about this problem. Below you may find a workaround in this case.
    //code behind
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ' Non IE Browser?
        If (Request.Browser.MSDomVersion.Major = 0) Then
            Response.Cache.SetNoStore() ' No client side cashing for non IE browsers End IfEnd Sub
        End If
    End Sub

    Please note that this problem is related to the FF browser and specifically how it caches some elements on the page when user refreshes a page in Firefox with the F5 button.


    Regards,
    Boyan Dimitrov
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  9. arnaud
    arnaud avatar
    104 posts
    Member since:
    Jul 2008

    Posted 30 Jan 2015 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

    What would be the downside in term of performance of your code (if any) ?

    Thank You
    Arnaud
  10. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 04 Feb 2015 Link to this post

    Hello,

    The downside (if any) depends on the amount of controls and logic in your page. In some cases I believe that you may not notice any difference or downside.

    However if you do not use this workaround you may face some unexpected behavior when refreshing the page as explained in my last post and the provided article.

    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. Stéphane
    Stéphane avatar
    1 posts
    Member since:
    Jan 2016

    Posted 29 Jan in reply to Boyan Dimitrov Link to this post

    Boyan Dimitrov said:
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ' Non IE Browser?
        If (Request.Browser.MSDomVersion.Major = 0) Then
            Response.Cache.SetNoStore() ' No client side cashing for non IE browsers End IfEnd Sub
        End If
    End Sub

    First, thanks for the post, your solution may work.

    But allow me a few questions:
    - It seems the issue here is only with Firefox, but your condition filters all other browser than IE. Why?
    - In order to filter non-IE browsers, you chose to use the MSDom Major version they support. Why?
    - The issue is with Firefox only, and only when refreshing pages. Is it wise to correct it with a fix that will impact all other browsers but IE, in all conditions?

     Best,

     Stephane

  12. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    282 posts

    Posted 02 Feb Link to this post

    Hi Stéphane,

    The issue is present in Firefox only, so instead of checking the MSDomVersion of the browser, you could check the browser string itself:
    if (Request.Browser.Browser == "Firefox")

    Keep in mind that checking the browser name used to be unsafe. This is legacy from so called "Browser wars" when browsers were pretending to be another browser by sending specific headers in their requests. You could still observe this behavior if you check the following collection when using IE or Chrome. They both pretend to be also a Firefox browser:
    Request.Browser.Browsers;

    Regards,
    Veselin Tsvetanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017