Combobox inside Combobox

3 posts, 0 answers
  1. kiran
    kiran avatar
    12 posts
    Member since:
    Feb 2011

    Posted 13 Oct 2011 Link to this post

    Hi
    Any one know how to use combobox inside comboboxes..?
    I used like the below

    <telerik:RadComboBox ID="rcbNonStock" CausesValidation="false" AutoPostBack="true" EmptyMessage="Search Non Stock Item..."                                                                ShowMoreResultsBox="true" runat="server" LoadingMessage="Loading..." AppendDataBoundItems="true" Width="300px"  Height="350px" DropDownWidth="725px" HighlightTemplatedItems="true"                                                                 Filter="Contains" EnableLoadOnDemand="true" OnSelectedIndexChanged="rcbNonStock_SelectedIndexChanged" EnableVirtualScrolling="true" OnItemsRequested="rcbNonStock_ItemsRequested" ZIndex="3000" AllowCustomText="True" >

                                                                  

                                                                   <HeaderTemplate>

                                                                  

     <table style="width: 700px">

     <tr>

    <td style="width: 80px; text-align: left">

    Item Category:</td>

    <td style="width: 200px; text-align: left">

    <telerik:RadComboBox ID="rcbNonStockCategory" runat="server" CausesValidation="false" AutoPostBack="true"  EnableLoadOnDemand="true" HighlightTemplatedItems="true"                           OnItemsRequested="rcbNonStockCategory_ItemsRequested"  DataTextField = "Item Category Code" DataValueField ="Item Category Code" Width="200px" Height="350px"                                                                  OnSelectedIndexChanged="rcbNonStockCategory_SelectedIndexChanged" ZIndex="4000"   ></telerik:RadComboBox> </td>                                                             

                                                                      

    <td style="width: 100px;">                                                                      </td>   

    <td style="width: 40px;"></td>                                                                                                                             

    <td style="width: 80px; text-align: left">                                                       

    Product Group: </td>

    <td style="width: 200px; text-align: left">

     <telerik:RadComboBox ID="rcbNonStockProduct" runat="server" CausesValidation="false" AutoPostBack="true"  EnableLoadOnDemand="true"

    DataTextField = "Product Group Code" DataValueField ="Product Group Code"   OnItemsRequested="rcbNonStockProduct_ItemsRequested"

    OnSelectedIndexChanged="rcbNonStockProduct_SelectedIndexChanged" EnableScreenBoundaryDetection ="true"  Width="200px"  Height="350px" ZIndex="4000"></telerik:RadComboBox>                                                                 </td>

    </tr>

    </table>

     <table style="width: 700px" cellpadding="0" cellspacing="0">

    <tr></tr>

    <tr></tr>

    <tr style="border-style: solid; border-width: 5px">

     <td style="width: 75px; text-align: left">

     No                                                                            </td>

                                                                                <td style="width: 300px; text-align: left">

                                                                                    Description

                                                                                </td>

                                                                                <td style="width: 150px; text-align: left">

                                                                                    Brand Name

                                                                                </td>

                                                                                <td style="width: 150px; text-align: left">

                                                                                    Catalogue ID

                                                                                </td>

                                                                            </tr>

                                                                        </table>

                                                                    </HeaderTemplate>

                                                                    <ItemTemplate>

    <table style="width: 700px" cellpadding="0" cellspacing="0">

                                                                            <tr>

                                                                                <td style="width: 75px; text-align: left">

                                                                                    <%# DataBinder.Eval(Container,"Value") %>

                                                                                </td>

                                                                                <td style="width: 300px; text-align: left">

                                                                                    <%# DataBinder.Eval(Container, "Attributes['Description']")%>

                                                                                </td>

                                                                                <td style="width: 150px; text-align: left">

                                                                                    <%# DataBinder.Eval(Container, "Attributes['Brand Name']")%>

                                                                                </td>

                                                                                <td style="width: 150px; text-align: left">

                                                                                    <%# DataBinder.Eval(Container, "Attributes['Catalogue ID']")%>

                                                                                </td>

                                                                            </tr>

                                                                        </table>

                                                                    </ItemTemplate>

                                                                    <FooterTemplate >

                                                                    </FooterTemplate>

                                                                </telerik:RadComboBox>



    But when i clicked any child combo box , the parent combo box getting closed
    Any one know about how refore to keep open the parent combo box when we clicked on any child combo boxs..?

    Regards
    Kiran
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 14 Oct 2011 Link to this post

    Hello Kiran,

    You can achieve this by attaching "OnClientDropDownClosing" of RadComboBox in HeaderTemplate and explicitly open the dropdown of the parent combobox. Here is the code.

    JS:
    <script type="text/javascript">
    function ClientDropDownClosing(sender, args)
    {
     var radcombo1 = $find('<%=rcbNonStock.ClientID %>');
     radcombo1.showDropDown()
    }
    </script>

    Thanks,
    Princy.
  3. kiran
    kiran avatar
    12 posts
    Member since:
    Feb 2011

    Posted 14 Oct 2011 Link to this post

    Hi Princy
    Many thanks for your reply

    Its now sorted to out now , i used some flag variable on child combobox opening and also force to canel on parent combobox closing like the below javascript

    <script language="javascript" type="text/javascript">

    var innerClosed = true;

    function OnClientChildDropDownOpening(sender, eventArgs)

    {

    innerClosed = false;

    }

    function OnClientParentDropDownClosing(sender, eventArgs)

    {

    if (innerClosed == false)

    {

    eventArgs.set_cancel(true);

    }

    else

    {

    eventArgs.set_cancel(false);

    }

    }

    </script>


    Regards
    Kiran

Back to Top