AUTHOR: Peter Milchev
DATE POSTED: November 28, 2018
Show all records in AutoCompleteBox when the input is focused.
To achieve that, we need to use the OnDataSourceSelect event 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.
<script>
function
OnClientLoad(sender, args) {
// fire a request for all records when focusing the input
$telerik.$(sender.get_inputElement()).on(
"focus"
,
(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
$telerik.$(sender.get_dropDownElement()).find(
".racList"
).on(
"mousedown"
() {
</script>
<
telerik:RadAutoCompleteBox
HighlightFirstMatch
=
"false"
OnDataSourceSelect
"RadAutoCompleteBox1_DataSourceSelect"
ID
"RadAutoCompleteBox1"
OnClientLoad
"OnClientLoad"
DataTextField
"Name"
DataValueField
"ID"
runat
"server"
>
</
protected
void
Page_Init(
object
sender, EventArgs e)
{
(IsCallback)
// prevent DataSource not set error
RadAutoCompleteBox1.DataSource =
""
RadAutoCompleteBox1_DataSourceSelect(
sender, Telerik.Web.UI.AutoCompleteBoxDataSourceSelectEventArgs e)
var autocompleteBox = sender
as
RadAutoCompleteBox;
DataTable ds = GetDataSource();
(e.FilterString ==
)
autocompleteBox.DataSource = ds;
else
DataTable filtered = ds.AsEnumerable().Where(x => x[
].ToString().ToLower().Contains(e.FilterString.ToLower())).CopyToDataTable();
autocompleteBox.DataSource = filtered;
private
DataTable GetDataSource()
DataTable dataTable =
new
DataTable();
dataTable.Columns.Add(
DataColumn(
typeof
(
int
)));
string
"CustomField"
dataTable.PrimaryKey =
DataColumn[1] { dataTable.Columns[
] };
for
i = 0; i <= 10; i++)
dataTable.Rows.Add(i,
"Name #"
+ i,
"Custom Field #"
+ i);
return
dataTable;
Resources Buy Try