Related ComboBoxes, set after postback clientside

8 posts, 1 answers
  1. Laz
    Laz avatar
    31 posts
    Member since:
    Apr 2009

    Posted 30 Jun 2009 Link to this post

    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
  2. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 03 Jul 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Laz
    Laz avatar
    31 posts
    Member since:
    Apr 2009

    Posted 03 Jul 2009 Link to this post

    Thanks for the great support.

    Always timely and competent!
  5. tomekm
    tomekm avatar
    38 posts
    Member since:
    Mar 2009

    Posted 22 Oct 2009 Link to this post

    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.

  6. Laz
    Laz avatar
    31 posts
    Member since:
    Apr 2009

    Posted 22 Oct 2009 Link to this post

    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?
  7. tomekm
    tomekm avatar
    38 posts
    Member since:
    Mar 2009

    Posted 23 Oct 2009 Link to this post

    Yes! Without EnabloLoadOnDemand text dissapeared as well. With EnabloLoadOnDemand = true it preserves but SelectedValue does not.
  8. Echarbeneau
    Echarbeneau avatar
    21 posts
    Member since:
    Nov 2006

    Posted 23 Oct 2009 Link to this post

    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.
  9. Echarbeneau
    Echarbeneau avatar
    21 posts
    Member since:
    Nov 2006

    Posted 23 Oct 2009 Link to this post

    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 ObjectByVal 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 ObjectByVal e As Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs) Handles rcbCompanyLocation.ItemsRequested 
            BindLocation(e.Text) 
        End Sub 

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017