Autocomplete Extender AJAX

Alternate use of  AutoComplete Extender AJAX




For searching what we basically need is  name and id behind it.
so for that we must have a
searcher :textbox(txtSearch)
id holder when search complete:hiddenfield(hfCustomerId)


Htmil Source Side

<script type = "text/javascript">

                      function ClientItemSelected(sender, e) {

                          $get("<%=hfCustomerId.ClientID %>").value = e.get_value();

                      }

    </script> 

Search by Client: 

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

                <asp:TextBox ID="txtSearch" runat="server" Width="200"></asp:TextBox>

                <asp:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server" 

                    BehaviorID="AutoCompleteEx" CompletionInterval="100" 

                    CompletionListCssClass="completionList" 

                    CompletionListHighlightedItemCssClass="itemHighlighted" 

                    CompletionListItemCssClass="listItem" CompletionSetCount="20"  OnClientItemSelected="ClientItemSelected"

                    DelimiterCharacters=";, :" EnableCaching="true" MinimumPrefixLength="1" 

                    ServiceMethod="GetClientList" ShowOnlyCurrentWordInCompletionListItem="true" 

                    TargetControlID="txtSearch" UseContextKey="True">

                </asp:AutoCompleteExtender>

Code Behind

Web Method to process autocomplete with textbox



Instead this (used for singal value)

SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings["ALPHAconnString"]);

        SqlCommand cmd = new SqlCommand("SELECT distinct [Company_Name],Client_id FROM Client where Company_Name like '" + prefixText + "%' ", con); 

        if (con.State == ConnectionState.Closed)

            con.Open();

        cmd.CommandType = CommandType.Text;

        SqlDataReader dr = cmd.ExecuteReader();

       



        while (dr.HasRows)

        {

            while (dr.Read())

            {

                string item = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(dr["Company_Name"].ToString(), dr["Client_id"].ToString());

                items.Add(item);



                //items.Add(dr.GetValue(0).ToString());



            }

            dr.NextResult();

        }

        return items.ToArray();

Use this(to hold two value)

SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings["ALPHAconnString"]);

       
 SqlCommand cmd = new SqlCommand("SELECT distinct 
[Company_Name],Client_id FROM Client where Company_Name like '" + 
prefixText + "%' ", con); 

        if (con.State == ConnectionState.Closed)

            con.Open();

        cmd.CommandType = CommandType.Text;

        SqlDataReader dr = cmd.ExecuteReader();

       



        while (dr.HasRows)

        {

            while (dr.Read())

            {

               
 string item = 
AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(dr["Company_Name"].ToString(),
 dr["Client_id"].ToString());

                items.Add(item);



                //items.Add(dr.GetValue(0).ToString());



            }

            dr.NextResult();

        }

        return items.ToArray();

after searching from textbox ,on any button Click

string clientid= Request.Form[hfCustomerId.UniqueID];

Ajax Calender Extender Control

Ajax Calender Extender Control

     
Ajax Calender Extender Control: Its a Light weight 
control and works fine!

For that you have to drag  Ajax's ToolkitScriptManager and required a TextBox and Ajax's CalendarExtender

Below is the css for CalendarExtender,and the Textbox where we need to control CalendarExtender

  <style type="text/css">
 .cal_Theme1 .ajax__calendar_container   {
        background-color: #e2e2e2; 
        border:solid 1px #cccccc;
    }
    
    .cal_Theme1 .ajax__calendar_header  {
        background-color: #ffffff; 
        margin-bottom: 4px;
    }
    
    .cal_Theme1 .ajax__calendar_title,
    .cal_Theme1 .ajax__calendar_next,
    .cal_Theme1 .ajax__calendar_prev    {
        color: #004080; 
        padding-top: 3px;
    }
    
    .cal_Theme1 .ajax__calendar_body    {
        background-color: #e9e9e9; 
        border: solid 1px #cccccc;
    }
    
    .cal_Theme1 .ajax__calendar_dayname {
        text-align:center; 
        font-weight:bold; 
        margin-bottom: 4px; 
        margin-top: 2px;
    }
    
    .cal_Theme1 .ajax__calendar_day {
        text-align:center;
    }
    
    .cal_Theme1 .ajax__calendar_hover .ajax__calendar_day,
    .cal_Theme1 .ajax__calendar_hover .ajax__calendar_month,
    .cal_Theme1 .ajax__calendar_hover .ajax__calendar_year,
    .cal_Theme1 .ajax__calendar_active  {
        color: #004080; 
        font-weight: bold; 
        background-color: #ffffff;
    }
    
    .cal_Theme1 .ajax__calendar_today   {
        font-weight:bold;
    }
    
    .cal_Theme1 .ajax__calendar_other,
    .cal_Theme1 .ajax__calendar_hover .ajax__calendar_today,
    .cal_Theme1 .ajax__calendar_hover .ajax__calendar_title {
        color: #bbbbbb;
    }
                            </style>
                    <br />


                    <asp:TextBox ID="TextBoxDate" runat="server" ></asp:TextBox>
                     <asp:CalendarExtender 
    CssClass="cal_Theme1" 
    ID="CalendarExtender1" 
    runat="server" 
    PopupButtonID="Image1"
    PopupPosition="Right"
    TargetControlID="TextBoxDate">
                       </asp:CalendarExtender>

You may also like

 Best css style for autocomplete.
 Autocomplete Extender Control.
Ajax Progress Bar.

Simple Css Style For AJAX AutoComplete Extender

AJAX: Simple CSS For AutoComplete Extender

 I know your AutoComplete Extender is working fine,but the thing is you are not happy with its presentation when its showing generating list in 20px padding difference with a bullet.

 1)if you have CSS like this 

2)Then apply below CSS to make it more simple like

 <style type="text/css">
   /*AutoComplete flyout */
.completionList {
border:solid 1px #444444;
margin:0px;
padding:2px;
height: 100px;
overflow:auto;
background-color: #FFFFFF;
}

.listItem {
color: #1C1C1C;
}

.itemHighlighted {
background-color: #ffc0c0;
}
   </style>

3)and further you know you must edit these thing with your extender too.

  
     CompletionListCssClass="completionList"
     CompletionListHighlightedItemCssClass="itemHighlighted"
     CompletionListItemCssClass="listItem"

If you are very new to AJAX autocomplete then here is a sample of autocomplete Extender on work.
                                
you may also like.....
Ajax Progress Bar.
Autocomplete Extender.
Ajax Calender Extender.

div class="MsoNormal" style="color: #3d85c6;">

Before I End I would like to recommend new kind of reporting which is which is currently a hot topic in IT industry, that is Power bi,and you can head start with it by viewing this popular video on power bi which can make you power bi professional in very simple stepsas below.

AutoComplete Extender AJAX

Using AJAX AutoComplete Extender Sample

Basic Sample How To Get Texts From Sql Database To TextBox

SQL Query For Sample

CREATE TABLE tb_Client(
    [Client_id] [bigint] IDENTITY(1,1) NOT NULL,
    [Client_Name] [varchar](max) NULL,
   
)

.CS

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static string[] GetClientList(string prefixText, int count, string contextKey)
    {
        if (count == 0)
        {
            count = 10;
        }

       
        List<string> items = new List<string>(count);

        SqlConnection con = new SqlConnection(ConfigurationManager.AppSettings["CString"]);
        SqlCommand cmd = new SqlCommand("SELECT [Client_Name],[Client_Id] FROM [dbo].[tb_Client] where Client_Name like '" + prefixText + "%'", con);
        if (con.State == ConnectionState.Closed)
            con.Open();
        cmd.CommandType = CommandType.Text;
        SqlDataReader dr = cmd.ExecuteReader();
        while (dr.HasRows)
        {
            while (dr.Read())
            {
                items.Add(dr.GetValue(0).ToString());

            }
            dr.NextResult();
        }

  

        return items.ToArray();
    }

You can also replace bit code with this to extend its performance as per your need.
           while (dr.Read())
            {
                string item = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(dr["Client_Name"].ToString(), dr["Client_Id"].ToString());
                items.Add(item);

            }

.ASPX Page

<asp:TextBox ID="txtSearch" runat="server" Width = "200"></asp:TextBox>
           <asp:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server"
               BehaviorID="AutoCompleteEx"
                TargetControlID="txtSearch"
                ServiceMethod="GetClientList"
                MinimumPrefixLength="1"
                CompletionInterval="100"
                EnableCaching="true"
                CompletionSetCount="20"
                CompletionListCssClass="AutoExtender"
        CompletionListItemCssClass="AutoExtenderList"
               
               
             
                CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
                DelimiterCharacters=";, :"
                ShowOnlyCurrentWordInCompletionListItem="true" UseContextKey="True" >
    </asp:AutoCompleteExtender>

CSS (add it in head)

  <style type="text/css">
   /*AutoComplete flyout */

.autocomplete_completionListElement
{ 
    margin : 0px!important;
    background-color : inherit;
    color : windowtext;
    border : buttonshadow;
    border-width : 1px;
    border-style : solid;
    cursor : 'default';
    overflow : auto;
    height :auto;
    text-align : left;
    list-style-type : none;
}

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem
{
    background-color: #ffff99;
    color: black;
    padding: 1px;
}

/* AutoComplete item */

.autocomplete_listItem
{
    background-color : window;
    color : windowtext;
    padding : 1px;
}
  .AutoExtender
        {
            font-family: Verdana, Helvetica, sans-serif;
            font-size: .8em;
            font-weight: normal;
            border: solid 1px #006699;
            line-height: 20px;
            padding: 10px;
            background-color: White;
            margin-left:10px;
        }
        .AutoExtenderList
        {
            border-bottom: dotted 1px #006699;
            cursor: pointer;
            color: Maroon;
            font-style:normal;
        }


   </style>

In last here is what you are lookin for...

To Adjust the style of Autocomplete extender genrating list you can take a view at Autocomplete Simple CSS.


you may also like.
Ajax Calender Control
Ajax Progress Bar

Ajax Progress Bar In ASP.Net

Ajax Progress Bar In ASP.Net

Till your code execution is in process if you require progress bar to show then here is a sample for you.

Like this Progress Bar...

So Start With A Basic Step...

1)Now Add This Code To Your .ASPX Page

 <div><asp:scriptmanager runat="server"></asp:scriptmanager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <Triggers>

            <asp:PostBackTrigger ControlID="btnUpload" />

        </Triggers>

        <ContentTemplate>

            <br />

            <asp:FileUpload ID="myFile" runat="server" />

            <asp:Label ID="lblMsg" runat="server"></asp:Label>           

            <br />

            <asp:Button ID="btnUpload" runat="server" Text="Upload"

                OnClick="UploadFile" OnClientClick="javascript:showWait();"/>          

            <br />

            <asp:UpdateProgress ID="UpdateProgress1" runat="server"

                AssociatedUpdatePanelID="UpdatePanel1">

                <ProgressTemplate>

                    <asp:Label ID="lblWait" runat="server" BackColor="#507CD1"

                        Font-Bold="True" ForeColor="White"

                        Text="Please wait ... Uploading file"></asp:Label>

                    <img alt="" src="progress.gif" />

                </ProgressTemplate>

            </asp:UpdateProgress>

        </ContentTemplate>

    </asp:UpdatePanel>
    </div>

Now look at your Design Page.It will look like below one

2)Add this javascript code at your header part of .ASPX Page.

<script language="javascript" type="text/javascript">

function showWait()

{

    if ($get('myFile').value.length > 0)

    {

        $get('UpdateProgress1').style.display = 'block';

    }

}

</script>

3)Now check your button click event with break points you'll see till the execution is under process your progress bar will remain visible.









4)Finally you'll get this kind of progress bar at the time of your execution taking long time


    


Download Sample From Here

                                                                               you may also like 

Ajax Calender Control.

Ajax Autocomplete Extender

CSS For Ajax Auto Complete Extender