Ensure an item is selected when searching with SearchBox
How to
Force item selection by preventing OnSearch event if there is no item selected.
Solution
To achieve that, you should set HighlightFirstMatch="true" in the control's configuration and set the client-side object's _postBackOnSearch to false if there is no _highlightedItem in the SearchBox in the OnClientSearch event. Optionally, you can clear the textbox when there is no selected item in the OnClientLoad event.
<asp:Label ID="Label1" runat="server" />
<br />
<br />
<telerik:RadSearchBox runat="server" Filter="Contains" HighlightFirstMatch="true"
OnSearch="RadSearchBox1_Search" ID="RadSearchBox1" OnClientLoad="OnClientLoad"
OnClientSearch="OnClientSearch">
</telerik:RadSearchBox>
function OnClientLoad(sender, args) {
// clear the text if there is no selected item
if (!sender._highlightedItem) {
sender.get_inputElement().value = "";
}
}
function OnClientSearch(sender, args) {
// prevent postback if no item is selected
if (!sender._highlightedItem) {
sender._postBackOnSearch = false
} else {
sender._postBackOnSearch = true
}
}
protected void Page_Init(object sender, EventArgs e)
{
if (IsCallback)
{
RadSearchBox1.DataSource = GetDataSource();
RadSearchBox1.DataTextField = "Name";
RadSearchBox1.DataValueField = "ID";
RadSearchBox1.DataBind();
}
}
protected void RadSearchBox1_Search(object sender, SearchBoxEventArgs e)
{
Label1.Text = string.Format("OnSearch fired, selected item: Text: {0}; Value: {1}!", e.Text, e.Value);
}
private DataTable GetDataSource()
{
DataTable dataTable = new DataTable();
dataTable.Columns.Add(new DataColumn("ID", Type.GetType("System.Int32")));
dataTable.Columns.Add(new DataColumn("Name", Type.GetType("System.String")));
dataTable.PrimaryKey = new DataColumn[1] { dataTable.Columns["ID"] };
for (int i = 0; i <= 10; i++)
{
dataTable.Rows.Add(i, "Name " + i);
}
return dataTable;
}