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

RadComboBox, Firefox and page refreshing

10 Answers 128 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Nathan
Top achievements
Rank 2
Nathan asked on 28 Jan 2014, 05:58 PM
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!

10 Answers, 1 is accepted

Sort by
0
Nathan
Top achievements
Rank 2
answered on 28 Jan 2014, 06:09 PM
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.
0
Shinu
Top achievements
Rank 2
answered on 29 Jan 2014, 07:25 AM
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.
0
Nathan
Top achievements
Rank 2
answered on 11 Feb 2014, 08:43 PM
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!
0
Eirik H
Top achievements
Rank 2
answered on 26 Mar 2014, 10:05 AM
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.
0
Eirik H
Top achievements
Rank 2
answered on 27 Mar 2014, 10:30 AM
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.
0
Boyan Dimitrov
Telerik team
answered on 31 Mar 2014, 11:34 AM
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.

 
0
arnaud
Top achievements
Rank 1
answered on 30 Jan 2015, 11:25 AM
Hi Boyan,

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

Thank You
Arnaud
0
Boyan Dimitrov
Telerik team
answered on 04 Feb 2015, 11:42 AM
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.

 
0
Stéphane
Top achievements
Rank 1
answered on 29 Jan 2016, 08:50 AM
[quote]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

[/quote]

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

0
Veselin Tsvetanov
Telerik team
answered on 02 Feb 2016, 11:12 AM
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
Tags
ComboBox
Asked by
Nathan
Top achievements
Rank 2
Answers by
Nathan
Top achievements
Rank 2
Shinu
Top achievements
Rank 2
Eirik H
Top achievements
Rank 2
Boyan Dimitrov
Telerik team
arnaud
Top achievements
Rank 1
Stéphane
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or