telerik的RadAutoCompleteBox控件学习三

一、使用List<>

      1.放置相关控件

      2.在Page_Load中写下如下代码:    

1 protected void Page_Load(object sender, EventArgs e)
2         {
3             RadAutoCompleteBox1.DataSource = new List<string>(){"Europe","America","China"};
4         }

     然后在 F5 运行,

 

二、使用web服务

     1.放置相关控件

     2.在RadAutoCompleteBox控件中写下如下代码

1         <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" Runat="server" DropDownHeight="150px" DropDownWidth="250px">
2             <WebServiceSettings Method="GetCompanyNames" Path="WebService1.asmx" />
3         telerik:RadAutoCompleteBox>

     其中 标签标识需要调用的web服务,其中的Method表示需要调用的操作,而Path则是被调用的web服务的路径。

     3.新建web服务(主要其中的名称要和 Path 的一样或者你可以在新建好之后重新设置Path属性)

     4.编写web服务代码

      在编写前请将"[System.Web.Script.Services.ScriptService]"前面的注释去掉

     代码如下:

    

 1 [WebMethod]
 2         public AutoCompleteBoxData GetCompanyNames(object context)
 3         {
 4             string searchstr = ((Dictionary<string, object>)context)["Text"].ToString();
 5             DataTable table = GetChildNodes(searchstr);
 6             List result = new List();
 7             foreach( DataRow row in table.Rows )
 8             {
 9                 AutoCompleteBoxItemData item = new AutoCompleteBoxItemData();
10                 item.Text = row["title"].ToString();
11                 item.Value = row["id"].ToString();
12                 result.Add(item);
13             }
14             AutoCompleteBoxData data = new AutoCompleteBoxData();
15             data.Items = result.ToArray();
16             return data;
17         }
18 
19         public DataTable GetChildNodes( string searchstr)
20         {
21             SqlCommand com = new SqlCommand("select * from t_radauto where title like @searchstr + '%'");
22             com.Parameters.AddWithValue("searchstr", searchstr);
23             return GetData(com);
24         }
25 
26         public DataTable GetData(SqlCommand com)
27         {
28             com.Connection = new SqlConnection("Data Source=2012-20130129NF\\SQLEXPRESS;Initial Catalog=TEST;Integrated Security=True");
29             SqlDataAdapter adapter = new SqlDataAdapter(com);
30             DataTable table = new DataTable();
31             adapter.Fill(table);
32             return table;
33         }

 其中的数据库连接部分请根据自己的情况设定。

 关于如何获得用户该文本框中的内容,其实很简单,因为该控件的实例有一个Text属性可以获得。

三、客户端事件

   下面将是我们将要讲述的客户端的事件:

OnClientDropDownClosed

下拉框已经关闭时响应

OnClientDropDownClosing

下拉框正在关闭时响应

OnClientDropDownItemDataBound

下拉框中每显示一条数据则响应一次

OnClientDropDownOpened

下拉框已经打开时响应

OnClientDropDownOpening

下拉框正在打开时响应

OnClientEntryAdded

键入的值已经增加时响应

OnClientEntryAdding

键入的值正在增加时响应

OnClientEntryRemoved

键入的值已经移除时响应

OnClientEntryRemoving

键入的值正在移除时响应

OnClientLoad

控件初始化完成时响应

OnClientTextChanged

文本被修改时响应

  下面我们来监听这些事件,看看他们的执行顺序,以及对应的事件如何。

   无后台代码

  下面是页面的代码:

 

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication1.WebForm4" %>
  2 
  3 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
  4 
  5 DOCTYPE html>
  6 
  7 <html xmlns="http://www.w3.org/1999/xhtml">
  8 <head runat="server">
  9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 10     <title>title>
 11     <script type="text/javascript" id="telerikClientEvents1">
 12 //
 13 
 14         function logEvent(val) {
 15             document.getElementById('log').innerHTML += (val+'
'); 16 } 17 function RadAutoCompleteBox1_DropDownClosed(sender,args) 18 { 19 logEvent('drop down closed'); 20 } 21 //]]> 22 script> 23 <script type="text/javascript" id="telerikClientEvents2"> 24 // 25 26 function RadAutoCompleteBox1_DropDownClosing(sender,args) 27 { 28 logEvent('drop down closing'); 29 } 30 //]]> 31 script><script type="text/javascript" id="telerikClientEvents3"> 32 // 33 34 function RadAutoCompleteBox1_DropDownItemDataBound(sender,args) 35 { 36 //Add JavaScript handler code here 37 logEvent('drop down item data bound'); 38 } 39 //]]> 40 script><script type="text/javascript" id="telerikClientEvents4"> 41 // 42 43 function RadAutoCompleteBox1_DropDownOpened(sender,args) 44 { 45 //Add JavaScript handler code here 46 logEvent('drop down opened'); 47 } 48 //]]> 49 script><script type="text/javascript" id="telerikClientEvents5"> 50 // 51 52 function RadAutoCompleteBox1_DropDownOpening(sender,args) 53 { 54 //Add JavaScript handler code here 55 logEvent('drop down opening'); 56 } 57 //]]> 58 script><script type="text/javascript" id="telerikClientEvents6"> 59 // 60 61 function RadAutoCompleteBox1_EntryAdded(sender,args) 62 { 63 //Add JavaScript handler code here 64 logEvent('entry added' + sender.get_text()); 65 } 66 //]]> 67 script><script type="text/javascript" id="telerikClientEvents7"> 68 // 69 70 function RadAutoCompleteBox1_EntryAdding(sender,args) 71 { 72 //Add JavaScript handler code here 73 logEvent('entry adding' + sender.get_text()); 74 } 75 //]]> 76 script><script type="text/javascript" id="telerikClientEvents8"> 77 // 78 79 function RadAutoCompleteBox1_EntryRemoved(sender,args) 80 { 81 //Add JavaScript handler code here 82 logEvent('entry removed' + sender.get_text()); 83 } 84 //]]> 85 script><script type="text/javascript" id="telerikClientEvents9"> 86 // 87 88 function RadAutoCompleteBox1_EntryRemoving(sender,args) 89 { 90 //Add JavaScript handler code here 91 logEvent('entry removing' + sender.get_text()); 92 } 93 //]]> 94 script><script type="text/javascript" id="telerikClientEvents10"> 95 // 96 97 function RadAutoCompleteBox1_Load(sender,args) 98 { 99 //Add JavaScript handler code here 100 logEvent('load'); 101 } 102 //]]> 103 script><script type="text/javascript" id="telerikClientEvents11"> 104 // 105 106 function RadAutoCompleteBox1_TextChanged(sender,args) 107 { 108 //Add JavaScript handler code here 109 logEvent('text changed' + sender.get_text()); 110 } 111 //]]> 112 script> 113 head> 114 <body> 115 <form id="form1" runat="server"> 116 <div> 117 <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" DataSourceID="SqlDataSource1" 118 DataTextField="title" DataValueField="id" DropDownHeight="150px" 119 DropDownWidth="250px" Filter="StartsWith" 120 OnClientDropDownClosed="RadAutoCompleteBox1_DropDownClosed" 121 OnClientDropDownClosing="RadAutoCompleteBox1_DropDownClosing" 122 OnClientDropDownItemDataBound="RadAutoCompleteBox1_DropDownItemDataBound" 123 OnClientDropDownOpened="RadAutoCompleteBox1_DropDownOpened" 124 OnClientDropDownOpening="RadAutoCompleteBox1_DropDownOpening" 125 OnClientEntryAdded="RadAutoCompleteBox1_EntryAdded" 126 OnClientEntryAdding="RadAutoCompleteBox1_EntryAdding" 127 OnClientEntryRemoved="RadAutoCompleteBox1_EntryRemoved" 128 OnClientEntryRemoving="RadAutoCompleteBox1_EntryRemoving" 129 OnClientLoad="RadAutoCompleteBox1_Load" 130 OnClientTextChanged="RadAutoCompleteBox1_TextChanged" 131 InputType="Text">telerik:RadAutoCompleteBox> 132 <telerik:RadScriptManager ID="RadScriptManager1" Runat="server"> 133 telerik:RadScriptManager> 134 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TESTConnectionString %>" SelectCommand="SELECT * FROM [t_radauto]">asp:SqlDataSource> 135 div> 136 <div id="log" > 137 div> 138 form> 139 body> 140 html>

 这样我们就清楚的看见事件的响应规律了。

后面将会按照官方的说明书进行学习将会更加详细

你可能感兴趣的:(telerik的RadAutoCompleteBox控件学习三)