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

[Solved] RadComboBox, Firefox and page refreshing

10 Answers 284 Views

ComboBox

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

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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.

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!

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.

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

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