Unusual PostBack with RadComboBox

[Steve]

Here's the situation: I have a "load on demand" RadComboBox that loads item on "ItemsRequested".  When the selected value changes, it also controls the value of a TextBox via Ajax (AjaxSettings setup in RadAjaxManagerProxy).  To handle setting the TextBox value, the combo's AutoPostBack="true".  Everything works fine except this scenario:

1. Page initially loads; RadComboBox has no items so the first time user clicks the dropdown, the "ItemsRequested" will fire.
2. User clicks the dropdown which fires the "ItemsRequested" event as expected.
3. Instead of choosing a value, user clicks anywhere else on the form (outside of the dropdown panel).
4. Page does an Ajax PostBack for some reason even though there is no event (that I can trap) that is fired.
5. The fact that the PostBack is fired, it clears the TextBox.  If I take out the AjaxSetting that has the combo controlling the TextBox, the TextBox maintains it's value.

My biggest question is why would the page postback when the RadComboBox does NOT appear to actually be firing a server side event?

[Chris T.]

I can't offer any suggestion as to why, but have you checked Request.Params["__EVENTTARGET"] and/or Request.Params["__EVENTARGUMENT"] during your postback?  They could provide clues as to what controls are posting back and why.

Or they could both be null/empty.

[Peter]

Hi!

I have a similar problem. Here is my setup:

<table>
    <tr>
        <td>
            <telerik:RadComboBox
                ID="cmbDatePicker" runat="server"
                Skin="Office2007"
                EnableLoadOnDemand="true"
                DataTextField="Text"
                DataValueField="Value"
                ItemRequestTimeout="500"
                OnItemsRequested="cmbDatePicker_ItemsRequested"
                OnSelectedIndexChanged="cmbDatePicker_SelectedIndexChanged"
                AutoPostBack="true">
                <collapseanimation duration="10" type="OutQuint" />
            </telerik:RadComboBox>
        </td>
        <td>
            <asp:Panel ID="pDateFromTo" runat="server" Visible="false">
                <asp:Label ID="lblStart" meta:resourcekey="lblStart"  runat="server"></asp:Label>
                <telerik:RadDatePicker
                    meta:resourcekey="datePicker"
                    id="dpStart"
                    Runat="server"
                    Skin="Office2007">
                    <Calendar Width="170px" />
                    </telerik:RadDatePicker>
                <asp:Label ID="lblEnd" meta:resourcekey="lblEnd" runat="server" ></asp:Label>
                <telerik:RadDatePicker
                    meta:resourcekey="datePicker"
                    id="dpEnd"
                    Runat="server"
                    Skin="Office2007">
                        <Calendar Width="170px" />
                    </telerik:RadDatePicker>
            </asp:Panel>
        </td>
    </tr>
</table>

The Combo Updates the Panel if needed (this is inside of a UserControl). The odd thing is that whenever the Control loses Focus even if the Combo was merely opened and closed a Postback happens.

I checked the "__EVENTTARGET" and it's definately the ComboBox doing the Postback. I also tried taking out the Page_Load but the Postback still appeared. What worked was to take out the AutoPostBack="true" from the ComboBox Control, however, once that was gone the desired effect to update the Calendar Controls was lost.

The interesting thing is that this only started after I updated from Version 2008.1.0515.35 to 2008.03.1314.20.

It is nervewrecking because the user can already work on other controls, meanwhile the control is performing a postback, once it updates the page, changes that have been made to other controls are lost.

Any clues for stopping this behaviour?

[Simon]

Hi there,

I tried reproducing what you are describing with the following markup and code:

<telerik:RadComboBox ID="RadComboBox1" runat="server" EnableLoadOnDemand="true" AutoPostBack="true">
</telerik:RadComboBox>

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);

    RadComboBox1.SelectedIndexChanged += new Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventHandler(RadComboBox1_SelectedIndexChanged);
    RadComboBox1.ItemsRequested += new Telerik.Web.UI.RadComboBoxItemsRequestedEventHandler(RadComboBox1_ItemsRequested);
}

void RadComboBox1_SelectedIndexChanged(object o, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
{

}

void RadComboBox1_ItemsRequested(object o, Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs e)
{
    RadComboBox1.Items.Add(new Telerik.Web.UI.RadComboBoxItem("item 1", "1"));
    RadComboBox1.Items.Add(new Telerik.Web.UI.RadComboBoxItem("item 2", "2"));
}

I tried opening the drop down (Items loaded) then clicking outside of the ComboBox - no postback occurred. Am I missing something?

Regards,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Peter]

Thank you for your help Simon!

I'm going to post the entire file for my DatePicker UserControl. Maybe it has something to do with being inside my UserControl?

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DatePickerControl.ascx.cs" Inherits="PresentationLayer.Controls.DatePicker.DatePickerControl" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadAjaxManagerProxy ID="radAjaxManagerProxy" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlId="cmbDatePicker">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pDateFromTo" LoadingPanelID="radAjaxLoadingPanel"/>
                <telerik:AjaxUpdatedControl ControlID="cmbDatePicker" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

<telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel" runat="server" Height="75px" Width="75px" Transparency="20">
    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" />
</telerik:RadAjaxLoadingPanel>

<table>
    <tr>
        <td>
            <telerik:RadComboBox
                ID="cmbDatePicker" runat="server"
                Skin="Office2007"
                EnableLoadOnDemand="true"
                DataTextField="Text"
                DataValueField="Value"
                ItemRequestTimeout="500"
                OnItemsRequested="cmbDatePicker_ItemsRequested"
                OnSelectedIndexChanged="cmbDatePicker_SelectedIndexChanged"
                AutoPostBack="true">
                <collapseanimation duration="10" type="OutQuint" />
            </telerik:RadComboBox>
        </td>
        <td>
            <asp:Panel ID="pDateFromTo" runat="server" Visible="false">
                <asp:Label ID="lblStart" meta:resourcekey="lblStart"  runat="server"></asp:Label>
                <telerik:RadDatePicker
                    meta:resourcekey="datePicker"
                    id="dpStart"
                    Runat="server"
                    Skin="Office2007">
                    <Calendar Width="170px" />
                    </telerik:RadDatePicker>
                <asp:Label ID="lblEnd" meta:resourcekey="lblEnd" runat="server" ></asp:Label>
                <telerik:RadDatePicker
                    meta:resourcekey="datePicker"
                    id="dpEnd"
                    Runat="server"
                    Skin="Office2007">
                        <Calendar Width="170px" />
                    </telerik:RadDatePicker>
            </asp:Panel>
        </td>
    </tr>
</table>

Codebehind:

using System;
using System.Collections.Generic;
using Telerik.Web.UI;

namespace PresentationLayer.Controls.DatePicker
{
    public partial class DatePickerControl : System.Web.UI.UserControl
    {
        public DateTime From
        {
            get { return dpStart.SelectedDate == null ? DateTime.MinValue : dpStart.SelectedDate.Value; }
        }

        public DateTime To
        {
            get { return dpEnd.SelectedDate == null ? DateTime.MaxValue : dpEnd.SelectedDate.Value; }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                cmbDatePicker.Text = " - ";
        }

        protected void cmbDatePicker_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
        {
            if (this.NeedDatePickerDataSource != null)
            {
                NeedDatePickerDataSourceEventArgs args = new NeedDatePickerDataSourceEventArgs();
                this.NeedDatePickerDataSource(this, args);
                // Bind Source from Args.

                this.cmbDatePicker.Items.Insert(0, new RadComboBoxItem(" - ", null));
                this.cmbDatePicker.DataBind();
            }
        }

        protected void cmbDatePicker_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
        {
             //Custom Code here
        }


        public event NeedDatePickerDataSourceEventHandler NeedDatePickerDataSource;


        public delegate void NeedDatePickerDataSourceEventHandler(object sender
             , NeedDatePickerDataSourceEventArgs e);

        public class NeedDatePickerDataSourceEventArgs : EventArgs
        {
            private ICollection<DatePickerType> types;

            public ICollection<DatePickerType> Types
            {
                get { return types; }
                set { types = value; }
            }

        }

    }
}

I think you can use most of this to try to reproduce, just ignore the NeedDatePickerDataSource. The only reason I posted it is in case I'm missing something with the way it's set up.

Again, this only started happening after I changed the Telerik.dll Version, maybe something that has been fixed since? My account has run out however, so I cannot update past 2008.03.1314.20.

Ciao, Peter.

[Simon]

Hi Peter,

Thank you for providing the code.

The issue that is reproducible in your case is caused by the following fact: the Text of the ComboBox is initially set to a value, which matches the Text of an Item loaded on demand.

In this case, when the control looses focus, it automatically finds the first Item matching the entered text and selects it. This behavior is by default.

Still we will log this issue for further consideration - it may actually turn out to be a real bug after some thorough investigation.

In the meanwhile, I suggest you use the following workaround - handle the client-side Load event of the ComboBox as shown below:

function onLoad(sender) {
    sender._oSelectItemOnBlur = sender._selectItemOnBlur;
    sender._selectItemOnBlur = function(e) {
        if (!this.get_enableLoadOnDemand())
            this._oSelectItemOnBlur(e);
    };
}

This successfully works around the default behavior and no postback occurs until actually an Item is selected (with the mouse, etc.).

Is this resolution acceptable for you?

Kind regards,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Peter]

Perfect!

 

That works very nicely in my scenario. Thank you for the valuable help!

 

Blessings, Peter.

[Christoph Köchling]

Hello *,

because i have the same issue and the workaround is still necessary for my solution (still working with 2009.2.826.35), i wanted to know if there is any other solution / information available in the meantime?

Regards
Christoph

[Simon]

Hello Christoph Köchling,

The issue is still existing in the latest version of Telerik.Web.UI. We will fix in it in the near future.

All the best,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Diego]

Hi all, the workaround posted above didn't work for me, am i missing something?
If i add the OnClientLoad event, the radcombobox stop expanding and showing items, when I click on the expand button nothing happens and autocomplete stop working too.

<telerik:RadComboBox ID="cboPickList" Width="161px" runat="server" MarkFirstMatch="true" AutoPostBack="true"
    OnItemsRequested="RadComboBox1_ItemsRequested" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged"
    EnableLoadOnDemand="True" Skin="Default" OnClientLoad="radCombobox_onLoad(this);" >
    <ItemTemplate>
        <div >
            <%# DataBinder.Eval(Container, "Text")%>
        </div>
    </ItemTemplate>
</telerik:RadComboBox>



<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        function radCombobox_onLoad(sender) {
            sender._oSelectItemOnBlur = sender._selectItemOnBlur;
            sender._selectItemOnBlur = function (e) {
                if (!this.get_enableLoadOnDemand())
                    this._oSelectItemOnBlur(e);
            };
        }
    </script>
</telerik:RadScriptBlock>

Regards,
Diego.

[Diego]

Hi everyone, I figured it out... the event declaration was wrong, I replaced it for: OnClientLoad="radCombobox_onLoad"  and it worked.

Thanks,
Diego.

[Souvik]

Hello,

I am using RAD combo box version- 2.8.1.0. I am using ItemsRequested event to implement AutoComplete/Suggest functionality for searching items. This is working as expected, but in one of my page aspx.vb I have some dependencies with other combo box due to unwanted postback even after setting autopostback to false. Is there any way to stop the post without using RAD script block?

Thanks in advance!

Regards,
Souvik

[Justin]

I am experiencing this issue as well.  I have two combo boxes on my web form for filtering data, when I select an item in each combo box and click outside of the combo boxes the item selected in the second combo box reverts to the first item in the list.  I tried the script but I continually get the following error:

"Microsoft JScript runtime error: Object doesn't support property or method '_oSelectItemBlur' "

Please advise

[Hristo Valyavicharski]

Hi Justin,

Can you provide us more details about your issue? What is the version of Telerik assemblies and version of your browser? A small sample or a code snippet would be very helpful.

Kind regards,
Hristo Valyavicharski
the Telerik team