[Solved] Following ComboBox/Related ComboBoxes sample - Issues with ComboBox.SelectedItem

[Brad Hehe]

I'm following the example  for cascading combo-boxes as found at: http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx

In my exmample I just have Country / City(region)

The problem I am having is this... I have the code working where the Country uses the OnClientSelectedIndexChanged which calls my javascript function "BindRegions"...  BindRegions in turn uses the Client-Side API and calls the regionsCombo.requestItems() method to cause an AJAX call to occur back to the server-side code for the apporpriate combo box.  The Regions combo box is databound (refreshed) in that event and then the expected client-side javascript call to ItemsLoaded occurs which selects the 1st item in the list.

When I click a 'Update' button on my form (CommandName="Update" defined on the button - no click event code present) a series of events occur and eventually I invoke a method which populates an entity from the controls on that screen (which actually is a user control template for a grid editor template).   When I check the controls, their values are not set to the expected values - which I suspect is due to not having AutoPostBack enabled - which leaves me in a pinch.

How do I do the "client-side/AJAX" approach but still have the correct values up in the server-side code?   On a prior project where we had cascading combo-boxes (i.e. Country/State or Year/Make/Model) it was done with AutoPostBack enabled and no client-side javascript at all...

So I have 2 questions....

(A) which is the "right" approach - using RadAjaxManager and Post-Backs or the example given from the ComboBox section of the web-site - this was frustrating in that the 'reccomended' approach is what I would expect to find here... 

(B) How do I make the approach shown at the link stated above work while still having access to the right 'selected' values (SelectedItem, SelectedValue, SelectedIndex, etc)...

[Brad Hehe]

In the following page there is a discussion about LoadOnDemand and what is available on the server.... It seems to indicate that SelectedValue and Text should be available. I was trying to use SelectedItem ----  So I started off debugging and I'm a little confused as to what I'm seeing in my little test harness...  I see the Text value is updated with what was chosen, so that's good - but I really don't like using the Text in lieu of a real "value" property since in my scenario the SelectedValue property is still reflecting the last server-side value.

http://www.telerik.com/help/aspnet-ajax/load-on-demand-access-items-server-side.html

What I'm wondering now is whether my markup is missing something - i.e. Should i have EnableLoadOnDemand set to True?

            <tr>
                <td>
                    <asp:Label ID="Label5" runat="server" Text="Country"></asp:Label>
                </td>
                <td>
                    <telerik:RadComboBox ID="CountryAjaxRadComboBox" runat="server" DataTextField="Name"
                        DataValueField="CountryId" OnClientSelectedIndexChanged="BindRegions">
                    </telerik:RadComboBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="Label6" runat="server" Text="Region"></asp:Label>
                </td>
                <td>
                    <telerik:RadComboBox ID="RegionAjaxRadComboBox" runat="server" DataTextField="Name"
                        DataValueField="CountryRegionId" OnItemsRequested="RegionAjaxRadComboBox_ItemsRequested"
                        OnClientItemsRequested="ItemsLoaded" EnableLoadOnDemand="True">
                    </telerik:RadComboBox>
                </td>
            </tr>

[Brad Hehe]

Well I think I sorted it out - I added the EnableLoadOnDemand and when I check the SelectedValue property it appears to be the correct value...

The only remaining question is how would I check for the condition where no value was selected? I'm hoping to find that the SelectedValue property would simply be null - currently in my test harness I'm using the approach where the 1st item is always automatically selected - but there's also the scenario where the 'region' list might contain zero items...

With the JavaScript code snippet I'm using from the Telerik-provided sample, it sets the text (via combo.set_text) to a string with a single space - but what would I expect to find up on the server for the SelectedValue in that case?  Like I said, hopefully null....

        function ItemsLoaded(combo, eventArqs)
        {
            if (combo.get_items().get_count() > 0) {
                // Select the first item
                combo.set_text(combo.get_items().getItem(0).get_text());
                combo.get_items().getItem(0).highlight();
            }
            else
            {
                combo.set_text(" ");
            }
        }

Is there a way to explicitly set the value?  I'm going to dig into the Client-API a little more looking fro something like a set_value method where I can explicitly set the value to null or at least empty-string....

[Brad Hehe]

I'm narrowing this down little by little... I can see in a zero-items scenario that the JavaScript function sets the text to a single space string. I did find there is a set_value method available as well. I've tried using it but I don't see the SelectedValue changing on the server... After looking in the help at the Client-Side API 'basics'... I saw there is a trackChanges/commitChanges pair of methods that seem to be used when doing things like modifying the items collection... I've attempted to include those in my script but they didn't seem to help...

How do I get a reliable / testable value to be set when the combo is populated with zero items? I don't want to create a special placeholder item (i.e. name :"Nothing Available" / value: -1)  or anything like that preferrably...

Here's my current script fragment...

        function ItemsLoaded(combo, eventArqs)
        {
            combo.trackChanges();
            if (combo.get_items().get_count() > 0)
            {
                // Select the first item
                combo.set_text(combo.get_items().getItem(0).get_text());
                combo.get_items().getItem(0).highlight();
            }
            else
            {
                combo.set_text(" ");
                combo.set_value(" ");
            }
            combo.commitChanges();
        }

I've also tried using a pure empty string.... next I'll be trying true null for value or possibly setting it to a negative integer value...

I'm so close - but this last little bump in the road is important to resolve (we're working on defining a pattern to follow for the rest of my team)...  

[Simon]

Hello Brad Hehe,

As you have probably already noticed the SelectedValue is a string which reflects the Value property of the selected Item. In this sense, the former is an empty string if there is not selection in the ComboBox.

Why don't you take advantage of this fact? 

Best wishes,
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.

[Brad Hehe]

I had tried that, but it still left one scenario out - when I bound the child list (Regions) and there were zero items....  When the server-side postback occurs and I checked the SelectedValue - the old value remained and I could not differentiate. I suppose I might have been able to look at the RadComboBoxItems.Count and when Zero assume a value???   Instead I just did the following - which isn't necessarily the desired end-state of the code - but works for now...

// Once a combo has requested its data...
function RadComboBoxItemsLoaded(combo, eventArqs) {
    var combocomboItems = combo.get_items();
    if (comboItems.get_count() == 0) {
        var emptyComboItem = new Telerik.Web.UI.RadComboBoxItem();
        emptyComboItem.set_text("");
        emptyComboItem.set_value("-1");

        combo.trackChanges();
        comboItems.add(emptyComboItem);
        combo.commitChanges();
    }

    // Select the first item
    combo.set_text(comboItems.getItem(0).get_text());
    comboItems.getItem(0).highlight();
}

I can then build the emptyComboBoxItem with whatever text/value I want to test for...

So I guess the remaining question for me is whether the approach I've temporarily used above is just as good as any other - or would I be better off on server-side just testing for the item count to be zero and using that as the 'trigger' to know that no value was selected/selectable...

[Simon]

Hi Brad Hehe,

Your approach is completely valid, actually it is one of the possible approaches in this case.

Still, your initial approach should work as well. Please try modifying the ItemsLoaded function you already used as shown below:

function ItemsLoaded(combo, eventArqs)
{
    if (combo.get_items().get_count() > 0)
    {
    // Select the first item
    combo.set_text(combo.get_items().getItem(0).get_text());
    combo.get_items().getItem(0).highlight();
    }
    else
    {
    combo.set_text(" ");
    combo.set_value(" ");
    combo.clearItems();
    }
}

Please note that the track/commit -Changes calls are removed as they are not needed in this case. The new here is the call to the clearItems method. Please try this and let me know whether it works.

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.

[Brad Hehe]

I see where the "clearItems" call was a bit of magic I was missing... After trying both approaches, I think using a placeholder item actually works better for me... When I went back to the original and added the "clearItems" call it worked as expected until I did a PostBack and had a Required Field Validator bound to the 'empty' combo box.... It's items were populated with the incorrect contents where the other approach preserved their 'empty' state... I'm sure it's something on my server-side routines that fetch the data - but the pattern I have in place now is simple enough and functioning as I need (further 'real' testing pending of course)...

Thanks again!