<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="AutoCompleteBox.Examples.Default.DefaultCS" %>
<!DOCTYPE html>
<
head
runat
=
"server"
>
<
title
>Telerik ASP.NET Example</
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
runat
=
"server"
ID
=
"RadScriptManager1"
/>
<
telerik:RadSkinManager
ID
=
"RadSkinManager1"
runat
=
"server"
ShowChooser
=
"true"
/>
<
div
class
=
"demo-containers"
>
<
div
class
=
"demo-container"
>
<
h2
>Text mode</
h2
>
<
telerik:RadAutoCompleteBox
RenderMode
=
"Lightweight"
runat
=
"server"
ID
=
"RadAutoCompleteBox1"
EmptyMessage
=
"Please type here"
DataSourceID
=
"SqlDataSource1"
DataTextField
=
"FirstName"
InputType
=
"Text"
Width
=
"350"
DropDownWidth
=
"150px"
>
</
telerik:RadAutoCompleteBox
>
</
div
>
<
div
class
=
"demo-container"
>
<
h2
>Token mode</
h2
>
<
telerik:RadAutoCompleteBox
RenderMode
=
"Lightweight"
runat
=
"server"
ID
=
"RadAutoCompleteBox2"
EmptyMessage
=
"Please type here"
DataSourceID
=
"SqlDataSource1"
DataTextField
=
"FirstName"
InputType
=
"Token"
Width
=
"350"
DropDownWidth
=
"150px"
>
</
telerik:RadAutoCompleteBox
>
</
div
>
</
div
>
<
asp:SqlDataSource
runat
=
"server"
ID
=
"SqlDataSource1"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT [FirstName], [LastName], [EmployeeID] FROM [Employees]"></
asp:SqlDataSource
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"ConfigurationPanel1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"ConfigurationPanel1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadAutoCompleteBox1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadAutoCompleteBox2"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadAjaxLoadingPanel
runat
=
"server"
ID
=
"RadAjaxLoadingPanel1"
/>
<
qsf:ConfiguratorPanel
runat
=
"server"
ID
=
"ConfigurationPanel1"
>
<
Views
>
<
qsf:View
>
<
qsf:ConfiguratorColumn
ID
=
"ConfiguratorColumn1"
runat
=
"server"
Size
=
"Medium"
>
<
ul
class
=
"fb-group"
>
<
li
>
<
qsf:DropDownList
runat
=
"Server"
ID
=
"FilterComboBox"
AutoPostBack
=
"true"
Label
=
"Filter"
>
<
Items
>
<
telerik:DropDownListItem
Text
=
"Contains"
Value
=
"Contains"
/>
<
telerik:DropDownListItem
Text
=
"StartsWith"
Value
=
"StartsWith"
/>
</
Items
>
</
qsf:DropDownList
>
</
li
>
<
li
>
<
qsf:DropDownList
runat
=
"Server"
ID
=
"DelimiterComboBox"
AutoPostBack
=
"true"
Label
=
"Delimiter"
>
<
Items
>
<
telerik:DropDownListItem
Text
=
";"
Value
=
";"
Selected
=
"true"
/>
<
telerik:DropDownListItem
Text
=
","
Value
=
","
/>
<
telerik:DropDownListItem
Text
=
"|"
Value
=
"|"
/>
<
telerik:DropDownListItem
Text
=
";,"
Value
=
";,"
/>
</
Items
>
</
qsf:DropDownList
>
</
li
>
<
li
>
<
qsf:DropDownList
runat
=
"Server"
ID
=
"DropDownPositionComboBox"
AutoPostBack
=
"true"
Label
=
"DropDownPosition"
>
<
Items
>
<
telerik:DropDownListItem
Text
=
"Automatic"
Value
=
"Automatic"
Selected
=
"true"
/>
<
telerik:DropDownListItem
Text
=
"Static"
Value
=
"Static"
/>
</
Items
>
</
qsf:DropDownList
>
</
li
>
<
li
>
<
span
class
=
"checkbox"
><
asp:CheckBox
CssClass
=
"new"
ID
=
"CheckBoxSingleLineEntries"
runat
=
"server"
Text
=
"Allow Single Line Entries "
AutoPostBack
=
"true"
/></
span
>
</
li
>
<
li
>
<
span
class
=
"checkbox"
><
asp:CheckBox
ID
=
"CheckBoxAllowCustomEntry"
runat
=
"server"
Text
=
"Allow Custom Entry"
AutoPostBack
=
"true"
/></
span
>
</
li
>
<
li
>
<
span
class
=
"checkbox"
><
asp:CheckBox
ID
=
"CheckBoxAllowTokenEditing"
runat
=
"server"
Text
=
"Allow Token Editing"
AutoPostBack
=
"true"
/></
span
>
</
li
>
</
ul
>
</
qsf:ConfiguratorColumn
>
<
qsf:ConfiguratorColumn
ID
=
"ConfiguratorColumn2"
runat
=
"server"
Size
=
"Medium"
>
<
ul
class
=
"fb-group"
>
<
li
>
<
qsf:DropDownList
runat
=
"Server"
ID
=
"SelectionComboBox"
AutoPostBack
=
"true"
Label
=
"SelectionMode (Text mode only)"
>
<
Items
>
<
telerik:DropDownListItem
Text
=
"Multiple"
Value
=
"Multiple"
Selected
=
"true"
/>
<
telerik:DropDownListItem
Text
=
"Single"
Value
=
"Single"
/>
</
Items
>
</
qsf:DropDownList
>
</
li
>
<
li
>
<
qsf:DropDownList
runat
=
"Server"
ID
=
"cbMaxResultsCount"
AutoPostBack
=
"true"
Label
=
"MaxResultCount"
>
<
Items
>
<
telerik:DropDownListItem
Text
=
"10"
Value
=
"10"
/>
<
telerik:DropDownListItem
Text
=
"20"
Value
=
"20"
/>
</
Items
>
</
qsf:DropDownList
>
</
li
>
<
li
>
<
qsf:DropDownList
runat
=
"Server"
ID
=
"cbMinFilterLength"
AutoPostBack
=
"true"
Label
=
"MinFilterLength"
>
<
Items
>
<
telerik:DropDownListItem
Text
=
"1"
Value
=
"1"
/>
<
telerik:DropDownListItem
Text
=
"2"
Value
=
"2"
/>
<
telerik:DropDownListItem
Text
=
"4"
Value
=
"4"
/>
</
Items
>
</
qsf:DropDownList
>
</
li
>
</
ul
>
</
qsf:ConfiguratorColumn
>
</
qsf:View
>
</
Views
>
</
qsf:ConfiguratorPanel
>
<
style
>
.new:before {
content: "";
width: 32px;
height: 10px;
background-color: #2eb246;
background-position: -10px 0;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAbCAYAAAAULC3gAAAA50lEQVRYR+1W2w6FMAiT///omZlgGiyMk4PEGH1xN2dXSplsD3vkYXi2ckBjjCEix77anm89+JzDNbhutm8BdGwMP44AtABSMAiMMYQMKqu3MMRCpmM2lDaEbYCQIQbqnH99lv17wPKQvRdQxtBUjFagOI4ZZlM96l9E7QGKUpj5CNvHmp/t4zenhjoAeeXjJ0Cef3i1St05YiHFkKcDdFhPQ5kwsQLLtPil/cqnPoZaGLKCZeKP1mDilIRs5WHKSiYbywAxv8p4mPWkMkCrWyIzQ9RT6RU2o6HInWnpWKm/a74kZJVgd6+zmCtV5tVUAAAAAElFTkSuQmCC");
background-repeat: no-repeat;
position: absolute;
left: -5px;
}
</
style
>
</
form
>
</
body
>
</
html
>