Home Contact

The Frog Pond of Technology

Ripples of Knowledge for SharePoint and Other .Net Technologies

News

My blog has moved to WordPress at BrianTJackett.com. Any pages will automatically redirect to the new address in 7 seconds. Please excuse an issues during this migration.

 Subscribe to this blog


About Me

Name:
Brian T. Jackett
Location:
Columbus, OH
Company:
Microsoft

Find me on...

Tag Cloud


Archives

Post Categories

Syndication:

Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint

    <Foreword>For those looking for help integrating the AJAXControlToolkit with SharePoint check out this post: Integrating ASP.NET AJAX with SharePoint</Foreword>

    I’ve never been one to use JavaScript that much in my web development, partially because I haven’t had much training with it and partially because I usually work on heavy server side web applications.  My current work project was well suited for some of the AJAXControlToolkit controls so I’ve been trying out other controls in the toolkit to see what uses they may have.  Last week I ran into a difficult client request that I didn’t have an efficient solution for in my first few passes.  Here’s the back story.

    The client has 500+ stores that they operate and part of the web application I’m designing sends messages between those stores.  The user will select various criteria for which stores are included: zone, district, state, etc.  One of the selections happens to be a custom store group code.  The number of store group codes currently used is well above 8000.  Obviously making the end user scroll through a list of 8000+ options is not ideal.  After attempting to implement a quick proof of concept of how bad performance was the web page chugged after every action.  The page size alone was over 1 MB and response time was going on 15-30 seconds or more.  What I wanted to present was something akin to a search engine (http://www.bing.com as an example) suggestion box that gives the user suggestions as they type.

AutoCompleteExtender3

 

 

 

 

 

 

 

 

 

 

 

 

 

     With this type of solution I could have the user filter the available options to less than 600 with just 1 letter entered and less than 50 with 2 letters entered.  Not only would this be more manageable to search through, but it would also save posting all of that extraneous data into the web page file thereby reducing the page size considerably.  Eventually I ran across the AutoCompleteExtender from the AJAXControlToolkit.  The way this control extender works is that you wire up a target control (textbox) and a web service that you will call into to get your results.  Below is part of the code needed to get this working.  I included a TextBoxWatermarkExtender as well to give a hint to the user.

 

TextBox txt = new TextBox();
txt.ID = "txtStoreGroupList";
txt.Width = Unit.Percentage(100);
table.Rows[rowNum].Cells[3].Controls.Add(txt);
 
table.Rows[rowNum].Cells[3].Controls.Add(new LiteralControl("Type at least 2 characters of store group code"));
 
// watermark extender gives directions on adding store groups
AjaxControlToolkit.TextBoxWatermarkExtender twe = new AjaxControlToolkit.TextBoxWatermarkExtender();
twe.ID = "tweStoreGroupList";
twe.TargetControlID = "txtStoreGroupList";
twe.WatermarkText = "Begin typing store group code...";
table.Rows[rowNum].Cells[3].Controls.Add(twe);
 
// autocomplete extender enables lookup of store groups without loading all 8000+ onto page
AjaxControlToolkit.AutoCompleteExtender ace = new AjaxControlToolkit.AutoCompleteExtender();
ace.ID = "aceStoreGroupList";
ace.ServiceMethod = "GetStoreGroupCompletionList";
ace.ServicePath = "/_layouts/autocompleteservice.asmx";
ace.TargetControlID = "txtStoreGroupList";
ace.MinimumPrefixLength = 2;
ace.CompletionSetCount = 50;
ace.CompletionInterval = 300;
ace.EnableCaching = true;
table.Rows[rowNum].Cells[3].Controls.Add(ace);

 

Looking at the implementation of the AutoCompleteExtender I require a “MinimumPrefixLength” of 2 and a “CompletionSetCount” of 50 so that the result set is manageable.  I have created a Web Service “autocompleteservice.asmx” with a web method “GetStoreGroupCompletionList” to return my suggestion short list.  This required a little bit of trickery to get working, so note the web service and web method decoration attributes.

 

[WebService(Namespace = "Your namespace goes here")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class AutoCompleteService : System.Web.Services.WebService
{
    static string _connectionstring = null;
    static DataTable dt = null;
 
    public AutoCompleteService()
    {
 
    }
 
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public string[] GetStoreGroupCompletionList(string prefixText, int count)
    {
        List<string> results = new List<string>();
 
        // if datatable for store group data is empty, skip this step
        if (dt == null )
        {
            // CALL INTO DATABASE FOR RESULTS REMOVED
 
        }
        
        DataRow[] rows = dt.Select("Group_Code LIKE '" + prefixText + "%'");
 
        for (int i = 0; i < rows.Length  && i < count; i++)
        {
            results.Add(rows[i]["FormattedDescription"].ToString());
        }
 
        return results.ToArray();
    }
}

    Be sure to include the "[System.Web.Script.Services.ScriptService]” attribute for the web service and the “[System.Web.Script.Services.ScriptMethod]” on the web method as they are not typical inclusions (thanks to this post for leading me in the right direction).  Essentially what they do is allow for the AJAX (any JavaScript really) to call this web service and web method.  Without them you will get something like a giant list of “undefined” values returned.  Now we simply need to publish this web service to a location that SharePoint can reach.  I chose the “/_layouts/” folder for convenience sake.  You could easily publish it to a different location or server that you have access to if needed.

    What we end up with is a very nice and easy to use textbox with suggestions that improves performance, improves the user experience, and required minimal coding to complete.

AutoCompleteExtender1

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 AutoCompleteExtender2

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

      As always please leave any feedback if you liked/disliked this example, have suggestions, etc.  Feel free to “borrow” my code snippets but please include references to the source material here if you do.

   -Frog Out


Thursday, June 25, 2009 9:07 PM

Feedback

# re: Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint

Hi Spanishfrogg,
awesome post... have u be worked associating the attribute of AutoCompleteExtender [DilimiterCharaters]

kindly...explain it...
Happy sharepointing...
Muraray 6/28/2009 10:03 PM | Muraray

# re: Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint

Murary,

Thanks for the feedback. Unfortunately no I haven't worked with the DelimiterCharacters property yet. If you go to this site http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AutoComplete/AutoComplete.aspx there is a sample of the control being used. Looks like the DelimiterCharacters property allows you to return one long string to return from your webservice which is then parsed based on any of the delimiter characters you choose, ex. ":;, ". Hope that helps you out.

Brian 6/29/2009 12:47 AM | Brian

# re: Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint

I have a question, has anyone tried deploying the web service_vti_bin directory like the rest of the SharePoint web services. I am trying to use the same thing in the _vti_bin (ISAPI) directory and it isn't working. Any ideas why? Seems to be related to authentication. 8/11/2009 5:12 AM | Graham

# re: Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint

Graham,
I have not tried to deploy a custom web service to the SharePoint _vti_bin folder but I don't know of any reasons it shouldn't work. Check out the below 2 articles and see if they help with solving the issue. Let me know if you find a solution. Thanks for reading.

http://msdn.microsoft.com/en-us/library/dd583131(office.11).aspx

http://www.jamestsai.net/Blog/post/Where-do-you-deploy-custom-SharePoint-web-service-files-to-(asmx-discoaspx-and-wsdlaspx).aspx 8/11/2009 3:11 PM | Brian

# re: Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint

Thanks a lot mate!
This is exactly what I was looking for.

I am newbie to webservices and AJAX, can you please explain steps to deploy the ASMX files in the /_layouts/ path cause I am having difficulty in accessing the web service from SharePoint.

Any help appreciated !

Thanks,
Akshay

9/2/2009 5:10 PM | Akshay

# re: Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint

Akshay,

I use WSPBuilder extensions in Visual Studio for developing my WSPs. When you create a SharePoint project WSPBuilder will create the "12 Hive" folder structure in your project. All you need to do is place your ASMX file under 12/Template/Layouts. During deployment your WSP should place that file into the corresponding folder on your servers for consumption.
Alternately you could develop your web service ASMX in a completely separate solution/project and hand copy it to the folder. I wouldn't recommend this as it involves deployment not using a WSP.
One other note to keep in mind. By deploying a web service to the /_layouts/ folder, any site may call the web service. This means that whatever URL you specify when calling it (ex. http://<server>/_layouts/myWebService.asmx or http://<server>/sites/HR/_layouts/myWebService.asmx) the account calling the web service must have proper access to that site (I believe contributor rights, but don't quote me on that).
I hope this helps. Let me know if you have further questions. 9/2/2009 11:34 PM | Brian Jackett

# re: Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint

Hi,
I am using your way for Ajax Auto Complete one by one but it shows me list of nulls.

could u please help me ?
regards
Fatemeh 8/18/2010 7:25 AM | Fatemeh

# re: Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint

Fatemeh,

Can you explain your issue a little more? Can you test your webservice independently and return results from it? Does your code have access to call the webservice? Did you make sure to put the WebMethod and ScriptMethod attributes on your web method? 8/22/2010 5:03 PM | Brian Jackett

# re: Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint

Hello
actually i'm using the smart part to include my user control in sharepoint can anyone show how can i include the web service using this technologie ? 7/7/2011 10:12 AM | Aloui

# re: Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint

Aloui,

Can you be a little more specific about what you mean by "include the web service"?
7/12/2011 8:54 AM | Brian T Jackett

# re: Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint

Thnks for the respons brian,
Actually i'm using smart part to include my user Control .ascx as webparts. I ve created the Web service et attached to the Autocomplete extender and got no compilation errors. but whene i try my web part i got nothing suggested.
Isuspected that the service is not integrated bu when i access it via it's url it's there.??
Any idea ??? 7/15/2011 6:29 AM | Aloui

# re: Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint

Aloui,

On your web service method did you make sure to include the attributes [System.Web.Services.WebMethod] and [System.Web.Script.Services.ScriptMethod]. The second is one I hadn't used before but let's you call the method using an AJAX call rather than explicit web request (or so I read).

Also have you used a network monitoring tool (such as Fiddler) to find out if the calls are actually being made to your web service?
7/19/2011 7:31 AM | Brian T Jackett

# re: Implementing the AJAXControlToolkit AutoCompleteExtender inside SharePoint


This is best one article so far I have read online. I would like to appreciate you for making it very simple and easy. I have found another nice post related to this post over the internet which also explained very well. For more details you may check it by visiting this url.......

http://mindstick.com/Articles/a7e242ef-fd21-4d4a-8cc6-ccbf4972be65/?Ajax%20Toolkit%20AutoCompleteExtender%20Control%20in%20Asp.Net

Thanks
1/3/2012 3:33 AM | Ajay Singh

Post A Comment
Title:
Name:
Email:
Comment:
Verification: