ComboBox selectedItem not accurate from client-side event

[Dan]

Hi,
We have a page containing (among other things) a RadComboBox (for Equipment) and a user control. 

The user control is for "Location" and has several RadComboBoxes (Campus, Building, Floor, etc).  The location is selected through these RadComboBoxes.

Our issue is that when a server-side event (e.g. Click or SelectedIndexChanged) requests the selected location, the correct value is returned but when a clien-side event (e.g. OnItemsRequested or OnClientDropDownOpening) requests the selected location, what is returned is the values originally assigned to the Location RadComboBoxes, not the updated values which may have been subsequently selected.

Thanks for your help,
Dan Norton

[Dimitar Terziev]

Hello Dan,

The experienced issue is very strange since when you call a client-side method the current value should be returned. Could you clarify which version of the controls you are using?

In order to troubleshoot this issue provide us with more information about your particular implementation.

All the best,
Dimitar Terziev
the Telerik team

[Dan]

Hi,
Our Telerik.Web.UI has been updated to version 2011.2.712.35 since I first posted but the issue remains.

To clarify a little, the LocationSelection user control has several RadComboBoxes and the values in each are changed (client-side) based on the selection of the previous.  For example, when a building is selected, the next RadComboBox is filled (with the floors that building has) and opened for the next selection.

On the consuming page we have another RadComboBox (Equipment) whose items we wish to have dependent on the selected location.  I am subscribing to the onclientdropdownopening event on the Equipment RadComboBox, using the following code to trigger the OnItemsRequested server-side event.

function radEquipmentDropDownOpening(combobox) {
    var randomnumber = Math.floor(Math.random() * 10001);
    combobox.requestItems("", false);
}

Inside the OnItemsRequested event, the selected location is retrieved from the LocationSelection control.  The issue is that the LocationSelection control returns the original location (more accurately the location that was selected prior to the last postback), not the location which was selected.  Again, this is only true in the OnItemsRequested scenario.  When the selected location is requested by a button click (as in the Save button) it returns the correct location. 

I have recently discovered that if:
1) a location is selected
2) any button is clicked that causes a postback
3) the Equipment dropdown is selected
it gets the correct location.

Perhaps this will help.  As I was crafting this note, I noticed that while the code referenced above does cause the OnItemsRequested event to fire, it often fires twice.  Specifically, the first time the dropdown is clicked or after the "button-caused postback" the OnItemsRequested event fires twice.  I don't know if that is an issue though, because the problem seems to be in the fact that the LocationSelection isn't returning the updated values when selected. 

Thanks again for any assistance you can offer,
Dan Norton

[Ivana]

Hello Dan,

The reason for the experienced behavior is the fact that when the RadComboBox's ItemsRequested event is fired a callback to the server is made. When this happens the current state of the controls is not send to the server as it is in a regular post-back or ajax request and this is why you are not able to get their state in the event handler function.

In order to deal with this behavior, you should pass the selected location as a parameter of the client-side requestItems method.

Please refer to the related ComboBoxes demo, where the above suggested approach has been implemented.

Regards,

Ivana

the Telerik team

[Dan]

Ivana,
Thanks for getting back to me.  I believe your analysis of the problem is correct but the problem I'm having is that the requestItems call I'm making is for the Equipment RadComboBox and the only place the selected location can be found is the LocationSelection control, so I don't have the required value to pass.  It is true that the LocationSelection user control is a series of linked combo boxes, but they are not connected in any way to the Equipment combo box.  I can't have the combo boxes in the LocationSelection control trigger a call to the Equipment combo box because the user may select several steps (Campus | Building | Floor | Room) before being done, but may stop at any level. 

Is there perhaps a client-side event that would trigger when the user selected to not choose (a Floor for example) that could send back a value that I could store server-side for when I need it?  Or even whenever a value was chosen from any combo box  in the LocationSelection control, could that value get sent somewhere that would be available?  Forgive me if that's a dubm question, I'm rather new to programming.

Thanks again,
Dan

[Ivana]

Hello Dan,

You can not know whether the client made a selection or not unless you make a check if for example the selected item is null (in case  you have the EmptyMessage property set to some text) and if the selected item is the default selected item that gets selected on page load.

If you want to send the current state of all the ComboBoxes to the server a possible approach could be to use RadAjaxManager and it's method OnAjaxRequest(string s). Here is a help article about its use.

Also here is a very simple example I made for you to see how the current state of the comboBoxes is sent to the server:
ASPX and JavaScript:

elerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManger1" runat="server" OnAjaxRequest="OnAjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManger1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadComboBox2" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <div>
        <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="186px" AutoPostBack="true"
         EmptyMessage="Select Me">
            <Items>
                <telerik:RadComboBoxItem Text="Item 1" Value="value1" />
                <telerik:RadComboBoxItem Text="Item 2" Value="value2" />
                <telerik:RadComboBoxItem Text="Item 3" Value="value3" />
            </Items>
        </telerik:RadComboBox>
        <telerik:RadComboBox ID="RadComboBox2" runat="server" Width="186px" OnClientDropDownOpening="OnClientDropDownOpening">
            <Items>
                <telerik:RadComboBoxItem Text="Item 1" Value="value1" />
                <telerik:RadComboBoxItem Text="Item 2" Value="value2" />
                <telerik:RadComboBoxItem Text="Item 3" Value="value3" />
            </Items>
        </telerik:RadComboBox>
    </div>
    <script type="text/javascript">
        function OnClientDropDownOpening(sender, args) {
            var ajaxmanager = $find("RadAjaxManger1");
            ajaxmanager.ajaxRequest();
        }
    </script>
    </form>

C#:

protected void OnAjaxRequest(object sender, AjaxRequestEventArgs e)
{
    if (RadComboBox1.SelectedItem != null )
    {
        var selectedItemText_Combo1 = RadComboBox1.SelectedItem.Text;
    }
    if (RadComboBox2.SelectedItem != null)
    {
        var selectedItemText_Combo2 = RadComboBox1.SelectedItem.Text;
    }
}

You can place a break point the OnAjaxRequest(object sender, AjaxRequestEventArgs e)method to see what the variables inside it contain.

Hope this helps.

All the best,

Ivana

the Telerik team