AutoCompleteExtender Selected Value Feature

Last post 06-19-2009 1:15 PM by Darsel. 17 replies.

Sort Posts:

  • Idea [Idea] AutoCompleteExtender Selected Value Feature

    06-20-2007, 12:35 AM
    • Member
      8 point Member
    • Darsel
    • Member since 05-02-2003, 6:54 PM
    • Colombia
    • Posts 9

    Hello everyone,

     I've been using the AJAX Control Toolkit for a while now and I wanted to use it as a "sophisticated" dropdownlist, instead of just using it as a hint box. I know that many people asked for that kind of functionality, but it seemed way too far from the original idea for the extender.

     So, I decided to "mod" the original autocompleteextender code and implemented a few extra features like Selected Value, AutoPostback for Item Selected Event, The Item Selected Event on Code Behind, Async Postback for Update Panels and, for that purpose, changed the web service / page method to use "string[][]" instead of "string[]", so you can pass the item's text in the first column and the value in the second column.

    If anyone is interested on the code and/or dll, you can download a solution with the extender and a test (sample) web site from here. You only have to fix the AJAX Control Toolkit reference on the extender and build (versions 10606 or 10618 should do the trick).

    Hope that this helps!

    Now for the questions:

    1. Since this is the first time I post something like this, is this the correct way to do it? I don't want to cause problems to anyone (or myself for that matter).
    2. I've seen the toolkit patch utility, but as far as I've seen, it only is meant to be used for bug fixes and small feature improvements. Since this is a major change (not so big really, but big enough), how can I get this code to reach the right "recipient", so it may be studied and hopefully added to the actual autocompleteextender control (well, at least the features, not necessarily the code).

    I really hope that someone can enlighten me on these two questions, and that my control is of help for those who wanted a more "dropdownlike" behaviour on the extender!

    Darsel Engineering
    http://darsel.spaces.live.com
  • Re: AutoCompleteExtender Selected Value Feature

    06-26-2007, 1:27 AM
    Answer

     Hi,

    Thanks for your contribution to the controlToolKit.

    It's great that you posted and described its feature here, it definitely will help others.

    You may also submit a patch here http://www.codeplex.com/AtlasControlToolkit/SourceControl/PatchList.aspx

    Thank you again. 

  • Re: AutoCompleteExtender Selected Value Feature

    08-16-2007, 2:05 PM
    • Member
      2 point Member
    • Nugs
    • Member since 02-16-2007, 8:10 PM
    • Posts 6

    Is this type opf functionalty goign to be added to AJAX at some point...

     Nugs

  • Re: AutoCompleteExtender Selected Value Feature

    08-17-2007, 1:33 AM
    • Member
      8 point Member
    • Darsel
    • Member since 05-02-2003, 6:54 PM
    • Colombia
    • Posts 9

    Hi there, I just updated the extender with a newer version (actually it's like 2 months old, but Nug's post reminded me about it Smile. This actually means that I've been using it for 2 months and have had zero problems with it, even found some neat extra tricks on the way Wink).

    I replaced the old version, so you can get it here.

    Fixes

    • Under some particular conditions the Postback didn't work. Just added a hidden input to act as the postback control so the server can find it in the DOM and doesn't go crazy.

    New Features

    • SelectedText: Allows you to read the last option selected from the "virtual" dropdownlist (Text, not value. Use SelectedValue for the last one) and set it from codebehind on a postback (can't read it from codebehind, sorry). This one is actually pretty good for situations where you want to know what the user selected before cleaning or modifying the textbox's content (I made a CustomValidator that uses this to help validate that the user doesn't "play" with the text once it's selected, probably will post it some time later)
    • ClientId: Gives you the ID of the hidden input, just in case you want to know.

    Stuff Left To Do

    • Make the default value of the SelectedValue a customized property so it can get changed if needed (right now it's fixed on "-1")
    • Make SelectedText readable on Code Behind

    Since I got a question about how to use the control and the code (thanks for your interest Nugs Yes), here is a simple explanation on how to get the AutoCompleteExtra Extender up and running quickly:

    1. Download the updated code from here.
    2. Unzip.
    3. Open the solution using VS 2005.
    4. Replace the missing reference to the Ajax Control Toolkit on the AutoCompleteExtra project with a reference to your latest toolkit dll (version 10618 recommended).
    5. Compile the whole solution.
    6. Now you have a Release dll on the first project (also under the bin directory of the web site) that you'll need to copy to your working project.
    7. Copy this dll on your website's bin folder
    8. Add a reference to the Ajax Control Toolkit (same version please) and to the Extender on your ASPX like it's done on the example web site included on the Zip File:
      <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc2" %>
      <%@ Register Assembly="AutoCompleteExtra" Namespace="AutoCompleteExtra" TagPrefix="cc1" %> 
    9. Add the control to your page:
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
      <cc1:AutoCompleteExtraExtender ID="AutoCompleteExtraExtender1" runat="server" ServiceMethod="GetCompletionList"
          TargetControlID="TextBox1" AsyncPostback="false" UseContextKey="True" AutoPostback="true"
          OnItemSelected="AutoCompleteExtraExtender1_ItemSelected">
      </cc1:AutoCompleteExtraExtender>
    10. Compile, play with the options, see how it works, post questions in this thread, add CSS styles and SKIN customizations, enjoy... Big Smile

    Hope that this is useful for anyone interested on the extender, thanks for reading!

    As a side note, I'd like to know if it's possible to move this thread to the Ajax Control Toolkit forum. I think that it may be of more use over there, maybe one of the moderators can help me out?
    Darsel Engineering
    http://darsel.spaces.live.com
  • Re: AutoCompleteExtender Selected Value Feature

    08-15-2008, 10:59 AM

    Hi Darsel,

    First off, thank you very much for posting this.  I have found it very helpful, and have learned much from this example.

    I have a question for you.  The SelectedText property doesn't seem to be working.  I have tried to do this before, but have run into a similar problem, that the javascript doesn't update the extender value(codebehind).  Have you gotten the SelectedText property to work?  If so how did you do it, if not do you have any ideas of what could be done?

    Thanks,

    Brent

  • Re: AutoCompleteExtender Selected Value Feature

    08-15-2008, 2:21 PM
    • Member
      8 point Member
    • Darsel
    • Member since 05-02-2003, 6:54 PM
    • Colombia
    • Posts 9

    Hi Brent, thanks for your comment.

    The SelectedText property is only accessible on the client using Javascript. When I added this property I thought it would be too bulky to send it to the server during postbacks, and I was focusing mainly on the SelectedValue feature back then.

    Nevertheless, the extender can be modified so the property becomes available on codebehind (sending it concatenated with the SelectedValue during the postback).

    Another option would be to use javascript to store the property in a different control, like a hiddenfield, and then reading that hiddenfield's text on the server. This one is not exactly a "pretty" option, but I've used it before... ^_^;

    Please tell me if you have any other questions.

    P.S. Maybe I should update the extender and add this feature? (It's been like a year since I touched that code...)

    Darsel Engineering
    http://darsel.spaces.live.com
  • Re: AutoCompleteExtender Selected Value Feature

    08-15-2008, 2:47 PM

    Thank you for your reply.

    I feared there was no clean way to update the value on the server from the javascript.  Thank you for your suggestion, that was what I was considering.  In my control I allow the user to specify a delimeter string that separates the value and text of an item, I will just use that same delimeter to store the item in the clientstate(from your example).  And then the extender will be able to parse the text and value on demand.

    Thank you again!
    Brent

  • Re: AutoCompleteExtender Selected Value Feature

    10-15-2008, 1:20 AM
    • Participant
      1,243 point Participant
    • login.arpit
    • Member since 04-26-2008, 6:42 AM
    • India
    • Posts 298

    Thanks Darsel for sharing this excellent control. It solved all my problems and I replaced large dropdowns by textboxes with AutoCompleteExtraExtender. I am facing a problem in it, hope you already have a workaround for it.

    My problem is- I am fetching some names and their Ids from database, user can select the names from textboxes with AutoCompleteExtraExtender. Its ok yet. But if, the user types some name thats not in the list of names available as suggestions and obviously, not in the database. I want to put a client side validation here. I have done a server side validation but, its a bit expensive. Can you help me that way?

    .NET-ified
    Arpit Khandelwal
    Please: Don't forget to click "Mark as Answer" on the post that helped you.
    That way future readers will know which post solved your issue.
  • Re: AutoCompleteExtender Selected Value Feature

    10-15-2008, 10:43 PM
    • Member
      8 point Member
    • Darsel
    • Member since 05-02-2003, 6:54 PM
    • Colombia
    • Posts 9

    Hi, I'm sorry but I don't think that I understand your problem. When the user types a name that's not on the database, the extender shouldn't be loading any suggestions. Therefore, the user wouldn't be able to choose or click anything and there would be no postback, so I don't understand how you can be doing server side validation...

    Can you clarify this for me please?

    Darsel Engineering
    http://darsel.spaces.live.com
  • Re: AutoCompleteExtender Selected Value Feature

    10-16-2008, 1:12 AM
    • Participant
      1,243 point Participant
    • login.arpit
    • Member since 04-26-2008, 6:42 AM
    • India
    • Posts 298

    Thanks for replying Darsel,  

    When the user types a name that's not on the database, the extender shouldn't be loading any suggestions.

    Its ok. But user still can type anything in the associated textbox.

    How can I prevent the page to be posted, if the textbox has a text value that do not belongs to suggestion list. I am looking for a client side functionality for this. 

    .NET-ified
    Arpit Khandelwal
    Please: Don't forget to click "Mark as Answer" on the post that helped you.
    That way future readers will know which post solved your issue.
  • Re: AutoCompleteExtender Selected Value Feature

    10-16-2008, 7:17 AM
    • Participant
      1,243 point Participant
    • login.arpit
    • Member since 04-26-2008, 6:42 AM
    • India
    • Posts 298

    One more thing I would like to ask you here, I am creating an instance of AutoCompleteExtraExtender at page_load dynamically like this-

    AutoCompleteExtraExtender ACELedger = new AutoCompleteExtraExtender();
    ACELedger.ID = "ace_txtLedger" + iRowCount.ToString();
    
    ACELedger.TargetControlID = TextBoxLedger.ID;
    ACELedger.ServiceMethod = "GetLedgersList";
    ACELedger.ServicePath = "AutoCompleteX.asmx";
    ACELedger.MinimumPrefixLength = 1;
    ACELedger.ContextKey = ((int)ViewState["CompanyID"]).ToString();
    ACELedger.CompletionInterval = 200;
    ACELedger.EnableClientState = true;
    ACELedger.UseContextKey = true;
    
    
     It works fine as an AutoCompleteExtender, but anytime when I find this dynamically added control from my page and check for its selected value, it returns  -1. Please tell me where I am wrong.
    .NET-ified
    Arpit Khandelwal
    Please: Don't forget to click "Mark as Answer" on the post that helped you.
    That way future readers will know which post solved your issue.
  • Re: AutoCompleteExtender Selected Value Feature

    10-16-2008, 11:56 AM
    • Member
      8 point Member
    • Darsel
    • Member since 05-02-2003, 6:54 PM
    • Colombia
    • Posts 9

    login.arpit:

    Thanks for replying Darsel,  

    When the user types a name that's not on the database, the extender shouldn't be loading any suggestions.

    Its ok. But user still can type anything in the associated textbox.

    How can I prevent the page to be posted, if the textbox has a text value that do not belongs to suggestion list. I am looking for a client side functionality for this. 

    I think I understand what you're saying now. The solution I recommend is using a Custom Validator control. The validator should check the control's SelectedValue property, using Javascript, to see if it matches the value "-1". This is the most effective way and I've used it successfully before.

    Darsel Engineering
    http://darsel.spaces.live.com
  • Re: AutoCompleteExtender Selected Value Feature

    10-16-2008, 1:45 PM
    • Member
      8 point Member
    • Darsel
    • Member since 05-02-2003, 6:54 PM
    • Colombia
    • Posts 9

    login.arpit:

    One more thing I would like to ask you here, I am creating an instance of AutoCompleteExtraExtender at page_load dynamically like this-

    AutoCompleteExtraExtender ACELedger = new AutoCompleteExtraExtender();
    ACELedger.ID = "ace_txtLedger" + iRowCount.ToString();
    
    ACELedger.TargetControlID = TextBoxLedger.ID;
    ACELedger.ServiceMethod = "GetLedgersList";
    ACELedger.ServicePath = "AutoCompleteX.asmx";
    ACELedger.MinimumPrefixLength = 1;
    ACELedger.ContextKey = ((int)ViewState["CompanyID"]).ToString();
    ACELedger.CompletionInterval = 200;
    ACELedger.EnableClientState = true;
    ACELedger.UseContextKey = true;
    
    

     It works fine as an AutoCompleteExtender, but anytime when I find this dynamically added control from my page and check for its selected value, it returns  -1. Please tell me where I am wrong.

    Hi Arpit, I've been looking onto this issue for the last couple of hours. It turns out that this problem is basically a limitation of the AJAX Control Toolkit's way of handling State. It just won't work with dynamically generated extender controls... there is nothing I can do about it, sorry... :S

    I did some testing with the Toolkit's CollapsibleExtender and the same happens there: a "predefined" control will remember it's state, but the dynamic one won't.

    Luckily, someone has found a workaround for this problem: http://forums.asp.net/p/1094970/1650425.aspx

    His solution is to look for the extender's viewstate directly into the Request.Form. It's not exactly the tidyest solution, but it works (I just tried it myself). If you use this solution, please remember to do it after recreating the extender on the Page_Load, and assigning the value you found on the viewstate, directly into the extender's SelectedValue property.

    Another typical solution would be to use HiddenFields to store the selected value using JavaScript on the client side (the hiddenfields will keep the state), and then reading them on the server after postback. This solution is way more complicated, so I don't recommend it.

    I hope this helps!

    Darsel Engineering
    http://darsel.spaces.live.com
  • Re: AutoCompleteExtender Selected Value Feature

    10-17-2008, 2:17 AM
    • Participant
      1,243 point Participant
    • login.arpit
    • Member since 04-26-2008, 6:42 AM
    • India
    • Posts 298

    Darsel:

    I think I understand what you're saying now. The solution I recommend is using a Custom Validator control. The validator should check the control's SelectedValue property, using Javascript, to see if it matches the value "-1". This is the most effective way and I've used it successfully before.

    Thanks Darsel,

    I have done a custom validation and its working perfectly. For others looking for the same solution I am pasting my ClientValidtionFunction Here-

            function compare(source,args)
            { 
               //ace_txtLedgerB is Behaviour ID of AutoCompleteExtraXtender
                var no = source.id.replace(/ctl00_cph_cVal/,"ace_txtLedgerB");
                args.IsValid = false;
                var comletionList=$find(no).get_selectedValue();
                if(comletionList != -1)
                {
                    args.IsValid = true;
                }
            }
     Thanks for your help Darsel.Yes
    .NET-ified
    Arpit Khandelwal
    Please: Don't forget to click "Mark as Answer" on the post that helped you.
    That way future readers will know which post solved your issue.
  • Re: AutoCompleteExtender Selected Value Feature

    10-17-2008, 12:28 PM
    • Member
      8 point Member
    • Darsel
    • Member since 05-02-2003, 6:54 PM
    • Colombia
    • Posts 9

    I'm glad I could help Arpit!

    Since you posted your code, I think I should do the same since it might also help other people. I used a different approach I think:

    1) This is my markup:

    <asp:TextBox ID="txtCity" runat="server" Text='<%# Bind("City") %>'></asp:TextBox>
    <cc2:AutoCompleteExtraExtender runat="server" ID="aceCity" TargetControlID="txtCity"
         BehaviorID="aceCity" ServicePath="" ServiceMethod="GetCities" MinimumPrefixLength="4"
         CompletionInterval="1000" EnableCaching="true" CompletionSetCount="15"
         SelectedValue='<%# Bind("IdCity") %>' SelectedText='<%# Eval("City") %>'/>
    <asp:CustomValidator ID="cvCity" ClientValidationFunction="ValidateAutoComplete" runat="server"
         ErrorMessage="You must select a city from the dropdown list" ControlToValidate="txtCity"
         SetFocusOnError="true" ValidationGroup="GridO" Value="aceCity" ValidateEmptyText="true"></asp:CustomValidator>

     As you can notice, for the validator to work you need to define the extender's BehaviorID, since that's what you'll use to "find" the control using Javascript. Here I'm using a nasty trick to make the validation process easier, and that's defining a Value Property for the Custom Validator. Custom Validators don't have a Value Property, so this one is in reality a custom property that uses a typical property's name (that way the Markup validator doesn't show you an error about an invalid property).

    2) And here is the Javascript that you need to use for the Validator to work:

    function ValidateAutoComplete(behavior, control)
    {
        var validator = $find(behavior.attributes['Value'].value);
        var value = validator.get_selectedValue();
        var text = validator.get_selectedText();
        if(value == "-1" || text != control.Value)
            control.IsValid = false;
        else
            control.IsValid = true;
    }

    When you reference this code in the page and you include the markup I pasted right above it, you'll get yourself a custom validator that checks that an option has been previously selected using the AutoCompleteExtra Extender, and it also checks that the user hasn't changed the text in the TextBox since he last chose an option (this is great for the situations where the user chooses an option and then, before postback occurs, changes the text without selecting any options from the list. If this where to happen, you'd get the right selectedValue, but if you read the TextBox's text, you'd find something completely different to the real selectedText). Of course, this last part is completely optional, and you can simply modify the Javascript if you don't want that to happen.

    The main advantage of this method is that you only need to create a Behaviour ID for the Extender, regardless of how the Page gets rendered and how the ID looks in the client.

    Darsel Engineering
    http://darsel.spaces.live.com
Page 1 of 2 (18 items) 1 2 Next >