Drop Down with Detailed Table

[Henry]

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.

[Princy]

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.

[Henry]

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.