Drop Down with Detailed Table

3 posts, 1 answers
  1. Henry
    Henry avatar
    44 posts
    Member since:
    Feb 2013

    Posted 17 Feb 2013 Link to this post

    Hi,
    Is it possible to create an AutoCompleteBox with a detailed drop-down? I have attached a sample one I found where all the details associated with a person's name is listed within the drop-down.

    Thank you,
    Henry.
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Feb 2013 Link to this post

    Hi Henry,

    Yes, it is possible to display additional information within a table like structure in RadAutoCompleteBox. Please have a look into the sample code I tried.

    ASPX:
    <telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox1" InputType="Token" Filter="StartsWith"
                DataSourceID="SqlDataSource1" Width="400px" DataTextField="FirstName" DropDownWidth="400px">
                <DropDownItemTemplate>
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <br />
                                    <br />
                                    <tr>
                                        <td>
                                            CustomerID:   
                                        </td>
                                        <td>
                                            <%# DataBinder.Eval(Container.DataItem, "EmployeeID")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            First Name:
                                        </td>
                                        <td>
                                            <%# DataBinder.Eval(Container.DataItem, "FirstName")%>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Last Name:
                                        </td>
                                        <td>
                                            <%# DataBinder.Eval(Container.DataItem, "LastName")%>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td align="right" style="width: 25%; padding-left: 10px;">
                                <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="Contact Photo"
                                    ToolTip="Contact Photo" Width="90px" Height="110px" ResizeMode="Fit" DataValue='<%# DataBinder.Eval(Container.DataItem, "Photo")%>' />
                            </td>
                        </tr>
                    </table>
                </DropDownItemTemplate>
            </telerik:RadAutoCompleteBox>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="select * from [Employees]"></asp:SqlDataSource>

    You may use the following CSS to set the height of the RadAutoCompleteBox drop-down in case if it occupies the entire page.

    CSS:
    <style type="text/css">
        .RadAutoCompleteBoxPopup_Default, .RadAutoCompleteBoxPopup .racList
        {
            max-height: 250px !important;
        }
    </style>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Henry
    Henry avatar
    44 posts
    Member since:
    Feb 2013

    Posted 18 Feb 2013 Link to this post

    Thank you Princy. This is what I needed exactly and the CSS you already applied was one of my other requirements since the drop down was covering a major portion of my page as you told.
Back to Top