New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Show all records when focusing the input element of RadAutoCompleteBox

How to

Show all records in AutoCompleteBox when the input is focused.

AutoCompleteShowAllOnFocus

Solution

To achieve that, we need to use the OnDataSourceSelectevent of the RadAutoCompleteBox in order to send the custom data. Then, in the OnClientLoad event of the AutoCompleteBox, we subscribe to the focus event of the AutoCompleteBox' input element and fire a request manually.

function OnClientLoad(sender, args) {
    // fire a request for all records when focusing the input
    $telerik.$(sender.get_inputElement()).on("focus", function (e) {
        var showAllRecords = true;
        console.log("focused");

        if (!sender.__isAddingEntry) {
            sender._requestItems("ShowAllRecords", showAllRecords)
        }
        sender.__isAddingEntry = false;
    });

    // prevent request fired when clicking an item of the dropdown
    sender.__isAddingEntry = false;
    $telerik.$(sender.get_dropDownElement()).find(".racList").on("mousedown", function () {
        sender.__isAddingEntry = true;
    });
}
<telerik:RadAutoCompleteBox HighlightFirstMatch="false" OnDataSourceSelect="RadAutoCompleteBox1_DataSourceSelect"
    ID="RadAutoCompleteBox1" OnClientLoad="OnClientLoad" DataTextField="Name"
    DataValueField="ID" runat="server">
</telerik:RadAutoCompleteBox>
protected void Page_Init(object sender, EventArgs e)
{
    if (IsCallback)
    {           
        // prevent DataSource not set error
        RadAutoCompleteBox1.DataSource = "";
    }
}

protected void RadAutoCompleteBox1_DataSourceSelect(object sender, Telerik.Web.UI.AutoCompleteBoxDataSourceSelectEventArgs e)
{
    var autocompleteBox = sender as RadAutoCompleteBox;
    DataTable ds = GetDataSource();
    if (e.FilterString == "ShowAllRecords")
    {
        autocompleteBox.DataSource = ds;
    }
    else
    {
        DataTable filtered = ds.AsEnumerable().Where(x => x["Name"].ToString().ToLower().Contains(e.FilterString.ToLower())).CopyToDataTable();
        autocompleteBox.DataSource = filtered;
    }
}


private DataTable GetDataSource()
{
    DataTable dataTable = new DataTable();

    dataTable.Columns.Add(new DataColumn("ID", typeof(int)));
    dataTable.Columns.Add(new DataColumn("Name", typeof(string)));
    dataTable.Columns.Add(new DataColumn("CustomField", typeof(string)));

    dataTable.PrimaryKey = new DataColumn[1] { dataTable.Columns["ID"] };

    for (int i = 0; i <= 10; i++)
    {
        dataTable.Rows.Add(i, "Name #" + i, "Custom Field #" + i);
    }

    return dataTable;
}

See also

In this article
Not finding the help you need? Improve this article