Wednesday, January 7, 2015

Ajax autoComplete extender Full Working example.

In This Example I am going to Show how to use AutoCompleteExtender of AjaxControlToolkit in asp .net.

For this we need a textBox , and one HiddenField for Storing Selected Items Value.

<asp:TextBox ID="txtSubledger" runat="server" Visible="true" AutoPostBack="True"                                                     OnTextChanged="ddlSubLedger_textChanged"></asp:TextBox>
                                              

  <ajax:AutoCompleteExtender ID="AutoCompleteExtender4" MinimumPrefixLength="3" runat="server"
                                                    TargetControlID="txtSubledger" ServiceMethod="GetCompletionListSubledger" FirstRowSelected="True"
                                                    UseContextKey="True" DelimiterCharacters="" Enabled="True">
 </ajax:AutoCompleteExtender>


  <asp:HiddenField runat="server" ID="ddlSubLedger" />


now on code behind we need a webservice for ServiceMethod="GetCompletionListSubledger" 

 [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static string[] GetCompletionListSubledger(string prefixText, int count, string contextKey)
    {
        DataTable dtAN = TblSubLedgerService.getsubldegertablebyename(prefixText);
        Dictionary<string, string> dt = new Dictionary<string, string>();
        foreach (DataRow dr in dtAN.Rows)
        {
            dt.Add(dr["SubLedgerID"].ToString(), dr["SubLedgerName"].ToString());
        }
        return (from m in dt.Values.ToArray<string>() select m).Take(count).ToArray();
    }


a text Changed event for textbox

   protected void ddlSubLedger_textChanged(object sender, EventArgs e)
    {
        if (!string.IsNullOrWhiteSpace(txtSubledger.Text))
            SetModuleNameListforSubledger(txtSubledger.Text, 3);
        else ddlSubLedger.Value = "";
    }
 

text Changed event calls SetModuleNameListforSubledger Which will basically call previous function of web service but will set hidden field in case of selection of any item.

    protected void SetModuleNameListforSubledger(string prefixText, int count)
    {
        DataTable dtAN;
        dtAN = TblSubLedgerService.getsubldegertablebyename(prefixText);
        if (dtAN == null || dtAN.Rows.Count < 1)
        {
            ddlSubLedger.Value = "";
            return;
        }
        ddlSubLedger.Value = dtAN.Rows[0]["SubledgerID"].ToString();
    }

Here, TblSubLedgerService.getsubldegertablebyename(prefixText) is in Service class and will fetch data from the database with filter.

         public static DataTable getsubldegertablebyename(string subledger)
        {
            const string query = "select top(20) SubLedgerID,code+' '+SubLedgerName as SubLedgerName from tbl_SubLedger where  code+' '+SubLedgerName like @Subledger";
            var tbl = DAO.GetDataTable(query, args => args.Add("@Subledger", string.Concat("%", (string.Concat(subledger, "%")))));
            return tbl;
        }


 Now, we can get selected data from autocomplete in hidden field.