[Solved] Related ComboBoxes, set after postback clientside

[Laz]

In my szenario i have a table. Inside this table there is an RadToolBar with two RadComboBoxes.

My problem is the handling of the Related ComboBoxes, after a postback. After the postback the second RadComboBox lost there

Datasource. What I try to do is to set second RadComboBox clientside in the pageLoad Function.

Depending of the value in the first RadComboBox (that i got in the pageLoad function) i try to refresh the datasource for the second RadComboBox.

Here is my code snippet:

    <script type="text/javascript">
        //global variables for the countries and cities comboboxes
        var RadGrid1;
        var WTypesCombo;
        var CDecisonCombo;

        //------------------------------------------------------------------------
        function GetGridObject(sender, eventArgs) {
            RadGrid1 = sender;
        }

        //------------------------------------------------------------------------
        function pageLoad() {
            // initialize the global variables
            // in this event all client objects
            // are already created and initialized
            WTypesCombo                 = $find('<%=rdtbWl.FindItemByText("rtbWTypes").FindControl("rcbWTypes").ClientID %>');
            CDecisonCombo               = $find('<%=rdtbWl.FindItemByText("rtbCDecision").FindControl("rcbCDecision").ClientID %>');

            //Get the selected type
            //this will only triggert if a submit event exists
            var SelectedIndex = document.getElementById("<%= SelectedWType.ClientID %>").value;

            if (SelectedIndex != "0") {
                //HERE REFRESH THE SECOND RADCOMBOBOX
                CDecisonCombo.requestItems(SelectedIndex.get_text(), false);
            }

        }
        //------------------------------------------------------------------------
        function OnClientSelectedIndexChanged(sender, eventArgs) {

            var item = eventArgs.get_item();
            //the first item is always the item to show all rows
            //we can not use a value because all values are identical. Only text are unique
            if (item.get_index() == "0") {
                //Set worklist type in hidden field to store in session, when the submit event is fired
                document.getElementById("<%= SelectedWType.ClientID %>").value = item.get_index();
            }
            else {
                //Set worklist type in hidden field to store in session, when the submit event is fired
                document.getElementById("<%= SelectedWType.ClientID %>").value = item.get_text();
            }

            CDecisonCombo.set_text("Loading...");

            // if a Worklisttyp is selected
            if (item.get_index() > 0) {
                // this will fire the ItemsRequested event of the
                // combobox passing the WtypID as a parameter
                CDecisonCombo.requestItems(item.get_text(), false);
            }
            else {
                // the -Select a continent- item was chosen
                CDecisonCombo.set_text(" ");
                CDecisonCombo.clearItems();
            }
        }

        //------------------------------------------------------------------------
        function ItemsLoaded(combo, eventArqs) {

            if (combo.get_items().get_count() > 0) {
                // pre-select the first item
                combo.set_text(combo.get_items().getItem(0).get_text());
                combo.get_items().getItem(0).highlight();
            }
        }
        //------------------------------------------------------------------------

    </script>

</telerik:RadCodeBlock>

<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
        <td>
            <telerik:RadToolBar ID="rdtbWl" runat="server"
                Style="display: block; float: none" Visible="true"
                Width="100%" OnClientButtonClicked="OnClientButtonClicking"
                OnButtonClick="rdtbWl_ButtonClick"
                OnClientMouseOver="clientMouseOver"
                OnClientMouseOut="clientMouseOut"
                meta:resourcekey="rdtbWlResource1">
                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                <Items>
                    <telerik:RadToolBarButton Value="rtbWTypes" Text="rtbWTypes">
                        <ItemTemplate>
                            <telerik:RadComboBox ID="rcbWTypes"
                                                    runat="server"
                                                    CssClass="DefaultText"
                                                    OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"
                                                    DataTextField="Shorttext"
                                                    DataValueField="Shorttext"
                                                    HighlightTemplatedItems="True">
                                <CollapseAnimation Duration="200" Type="OutQuint" />
                            </telerik:RadComboBox>
                        </ItemTemplate>
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton Value="rtbCDecision" Text="rtbCDecision">
                        <ItemTemplate>
                            <telerik:RadComboBox ID="rcbCDecision"
                                                    runat="server"
                                                    CssClass="DefaultText"
                                                    OnClientItemsRequested="ItemsLoaded"
                                                    OnItemsRequested="rcbCDecision_ItemsRequested">
                                <CollapseAnimation Duration="200" Type="OutQuint" />
                            </telerik:RadComboBox>
                        </ItemTemplate>
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton Text="rtbColumnSetDecision"
                        Value="rtbColumnSetDecision"
                        runat="server" PostBack="false"
                        meta:resourcekey="RadToolBarButtonResource4" >
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton Text="rtbCDecisionExecute"
                        Value="rtbCDecisionExecute"
                        runat="server" PostBack="true">
                    </telerik:RadToolBarButton>
                </Items>
            </telerik:RadToolBar>
        </td>
    </tr>
</table>

<%--store the selected Type--%>
 <asp:HiddenField ID="SelectedWType" runat="server" Value="0"/>

The same example we find in the telerik demos: [Related ComboBoxes]
http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx

Thanks for any help

[Yana]

Hello Laz,

Please set EnableLoadOnDemand property of rcbCDecision combobox to "true" in order to preserve the loaded items.

Regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Laz]

Thanks for the great support.

Always timely and competent!

[tomekm]

Does this solution preserve SelectedValue property?

I have three related Comboboxes and I am using your technique

Unfortunately, there are also other fields on form that causes validation, and if it fails, text remains in comoboxes thank to EnableLoadOnDemand, however on serverside - SelectedValue is equal to null.

[Laz]

Hi,
in my code szenario the selected values preserve. But i didn´t have any validation!

Do you have set EnableLoadOnDemand property of your control x to "true" in order to preserve the loaded items?

[tomekm]

Yes! Without EnabloLoadOnDemand text dissapeared as well. With EnabloLoadOnDemand = true it preserves but SelectedValue does not.

[Echarbeneau]

I am also using this and when the page posts back I lose all of the items for the linked combo boxes. Is this normal?

Regards,
Ed C.

[Echarbeneau]

Alright, I figured this out on my own. Thank you for posting, the information I found here led me to my answer.

Here is my final working solution:

<telerik:RadComboBox ID="rcbCompany" runat="server" Width="200px" CssClass="field"
            CausesValidation="False" OnClientSelectedIndexChanging="LoadLocations"
            EnableLoadOnDemand="True">
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        </telerik:RadComboBox>
<telerik:RadComboBox CssClass="field" ID="rcbCompanyLocation" runat="server" Width="200px"
            OnClientItemsRequested="ItemsLoaded"
            OnItemsRequested="rcbCompanyLocation_ItemsRequested" EnableLoadOnDemand="True">
            <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        </telerik:RadComboBox>

// there are two combos linked
// rcbCompany(master)
// rcbCompanyLocation

 var radcomboLocations;

    function pageLoad() {
        // initialize the global variables
        // in this event all client objects
        // are already created and initialized
        radcomboLocations = $find("<%= rcbCompanyLocation.ClientID %>");

    }

    function LoadLocations(combo, eventArqs) {
        var item = eventArqs.get_item();
        radcomboLocations.set_text("Loading...");
        radcomboLocations.requestItems(item.get_value(), false)
        }
    }

    function ItemsLoaded(combo, eventArqs) {

        if (combo.get_items().get_count() > 0) {
            // pre-select the first item
            combo.set_text(combo.get_items().getItem(0).get_text());
            combo.get_items().getItem(0).highlight();
            combo.showDropDown();
        }

    }

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            'Do page load stuff
            BindCompany()
        Else
            'Rebind slaved combo box items
            'rcbCompanyLocation.SelectedValue is retained by setting the property
            '    EnableLoadOnDemand = True
            BindLocation(rcbCompany.SelectedValue)
        End If
     Protected Sub rcbCompanyLocation_ItemsRequested(ByVal o As Object, ByVal e As Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs) Handles rcbCompanyLocation.ItemsRequested
        BindLocation(e.Text)
    End Sub