Home > AJAX, ASP.Net > Ajax autocomplete textbox in EditItemTemaplate with GridView

Ajax autocomplete textbox in EditItemTemaplate with GridView


Hi all,

try this example to use AJAX AutoComplete ToolKit in Edit Item with Gridview Control

create a web service which calls the method to fetch data from database and display results as suggestions for textbox
For this add a new webservice to the project and name it AutoComplete.asmx or whatever you want, in the code behind of the web service we write methods to get the records from database and a web method called GetCompletionList which takes text entered in textbox as parameter to search database , this method gets automatically called when ever user types anything in the textbox, the code for this web service is like this


using System;
using System.Collections.Generic;
using System.Web.Services;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;

[WebService]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]

public class AutoComplete : WebService
{
public AutoComplete()
{
}

[WebMethod]
public string[] GetCompletionList(string prefixText, int count)
{
   if (count == 0)
   {
       count = 10;
   }
   DataTable dt = GetRecords(prefixText);
   List<string> items = new List<string>(count);

   for (int i = 0; i < dt.Rows.Count; i++)
   {
       string strName = dt.Rows[i][0].ToString();
       items.Add(strName);
   }
   return items.ToArray();
}

public DataTable GetRecords(string strName)
{
   string strConn = ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ConnectionString;
   SqlConnection con = new SqlConnection(strConn);
   SqlCommand cmd = new SqlCommand();
   cmd.Connection = con;
   cmd.CommandType = System.Data.CommandType.Text;
   cmd.Parameters.AddWithValue("@Name", strName);
   cmd.CommandText ="Select Name from Test where Name like '%'+@Name+'%'";
   DataSet objDs = new DataSet();
   SqlDataAdapter dAdapter = new SqlDataAdapter();
   dAdapter.SelectCommand = cmd;
   con.Open();
   dAdapter.Fill(objDs);
   con.Close();
   return objDs.Tables[0];
}
}

And in the html source for aspx page add a script manager and within scriptmanager tag , add ServiceReference and path to asmx file, in gridview add autocomplete extender for the textbox which we want to autocomplete

<form id="form1" runat="server">
   <asp:ScriptManager ID="ScriptManager1"
        runat="server">
   <Services>
   <asp:ServiceReference Path="AutoComplete.asmx" />
   </Services>
   </asp:ScriptManager>
   <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
       <asp:GridView ID="GridView1" runat="server"
            AutoGenerateColumns="False"
            DataSourceID="SqlDataSource1">
           <Columns>
               <asp:CommandField ShowEditButton="True" />
               <asp:TemplateField HeaderText="ID"
                    SortExpression="ID">
               <ItemTemplate>
               <asp:Label ID="lblID" runat="server"
                    Text='<%#Eval("ID") %>'></asp:Label>
               </ItemTemplate>
               <EditItemTemplate>
               <asp:Label ID="lblID" runat="server"
                    Text='<%#Bind("ID") %>'></asp:Label>
               </EditItemTemplate>
               </asp:TemplateField>
               <asp:TemplateField HeaderText="Name"
                    SortExpression="Name">
               <ItemTemplate>
               <asp:Label ID = "lblName" runat="server"
                    Text='<%#Eval("Name") %>'></asp:Label>
               </ItemTemplate>
               <EditItemTemplate>
               <asp:TextBox ID="txtName" runat="server"
                    Text='<%#Bind("Name") %>' >
               </asp:TextBox>
               <ajaxToolkit:AutoCompleteExtender
                             runat="server"
                             ID="autoComplete1"
                             TargetControlID="txtName"
                             ServicePath="AutoComplete.asmx"
                             ServiceMethod="GetCompletionList"
                             MinimumPrefixLength="1"
                             CompletionInterval="10"
                             EnableCaching="true"
                             CompletionSetCount="12" />
               </EditItemTemplate>
               </asp:TemplateField>
               <asp:TemplateField HeaderText="Location"
                    SortExpression="Location">
               <ItemTemplate>
               <asp:Label ID="lblLocation" runat="server"
                    Text='<%#Eval("Location") %>'></asp:Label>
               </ItemTemplate>
               <EditItemTemplate>
               <asp:Label ID="lblLocation" runat="server"
                    Text='<%#Bind("Location") %>'></asp:Label>
               </EditItemTemplate>
               </asp:TemplateField>
               </Columns>
       </asp:GridView>
       </ContentTemplate>
   </asp:UpdatePanel>
   <div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ConnectionStrings: DatabaseConnectionString%>"
SelectCommand="SELECT [ID], [Name], [Location] FROM [Test]"
UpdateCommand="Update Test set [Name] = @Name where ID = @ID">
           <UpdateParameters>
               <asp: Parameter Name="Name" />
               <asp: Parameter Name="ID" />
           </UpdateParameters>
       </asp:SqlDataSource>
</div>
</form>

Hope this helps

Good Luck

Advertisements
Categories: AJAX, ASP.Net
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: