Drop Down Button for Tag List

[Dan Ehrmann]

I am using the AutoComplete control in tag mode, and I have created a button which will drop down the full tag list, based on some code I found in the forums or knowledgebase somewhere. It works nicely, unless I wrap it in an ajax panel. After a postback, the button no longer works - I get a javascript error: "Unable to get property 'itemDataBound' of undefined or null reference" in jQueryPlugins.js at line 237.

Here is my code:

var autoComplete = $find("<%= tag_box.ClientID %>");
var dropDown = autoComplete._dropDown;
var itemData = autoComplete._dropDownItemData;
setTimeout(function (e) {
   dropDown.populate(itemData, true);
   dropDown.open(autoComplete._getDropDownPositionInfo());
   dropDown.highlightNext();
   $('li.racItem').css('display', 'list-item');
}, 200);

The error occurs during the call to 'populate()'

The AutoComplete control works fine by itself after the postback. The tags list is populated, and I can add and remove tags using the keyboard without any fuss.

The script and the AutoComplete are contained in a user control (ascx) which is contained in another user control which has the ajax panel. The script is wrapped in a RadScriptBlock.

I also have two event handlers which I add to the AutoComplete  control, like this:

autoComplete.add_entryAdding(tagEntryAdding);

autoComplete.add_entryRemoved(tagEntryRemoved);

The events do not get called after a postback. I set the handlers from a jQuery 'ready' with a small timeout. Works fine before postback. but not after. The 'ready' code gets called (though for some reason I can't catch it in the browser debugger after postback).

I know I am missing something about how ajax and scripts and user controls work together, but I can't figure it out.

 

[Dan Ehrmann]

I think I have solved my own problem. The code I posted was slightly modified for clarity. I was actually using a stale reference to the AutoComplete control - running this with a fresh $find resolved the script error. I also had to re-bind the event handlers at the same time. So, all is well.

This seems more complicated than it should be, and it feels like something that may break with future versions. Is there a better way to accomplish this? I have seen a suggestion to use autocomplete.query(' '), but this does not work for me - it shows only those items in the list which include spaces - I need to show the entire list.

I neglected to mention this - I am using client filtering.

[Peter Milchev]

Hello Dan,

I am glad to hear that you managed to find a solution for your issue. 

Regarding the scripts and handlers, the following forum threads should be helpful: 

• Document.Ready() is not working after PostBack;
• jQuery $(document).ready and UpdatePanels?;
• jQuery document.ready vs pageLoad;

As for the autocomplete.query() method, would you please check if calling it with an empty string, instead of a whitespace, solves the issue? 

Regards,
Peter Milchev
Telerik by Progress

[Dan Ehrmann]

Late response - got distracted...

The links link helpful - I will try them out - thanx

The query function returns nothing at all if I use an empty string rather than a space

[Peter Milchev]

Hello Dan,

Please find attached a sample project that implements one approach to open the dropdown showing all items.

<script type="text/javascript">
    function OnClientDropDownOpened(sender, args) {
        setTimeout(function () {
            for (var i = 0; i < sender._dropDown._items.length; i++) {
                $telerik.$(sender._dropDown._items[i]._element).show();
            }
        }, 0);
    }

    function OnClientClicked(sender, args) {
        var autocompletebox = $find("<%= RadAutoCompleteBox1.ClientID%>");
        autocompletebox._dropDown.open(autocompletebox._getDropDownPositionInfo());
    }
</script>

<telerik:RadButton runat="server" AutoPostBack="false" OnClientClicked="OnClientClicked" Text="Show all" />
<telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox1" EnableClientFiltering="True" OnClientDropDownOpened="OnClientDropDownOpened"
    InputType="Token" DropDownHeight="400px" Width="100%"
    DataValueField="ProductID" DataTextField="ProductName" DataSourceID="SqlDataSource1" AllowCustomEntry="true">
</telerik:RadAutoCompleteBox>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    SelectCommand="SELECT [ProductID], [ProductName] FROM [Alphabetical list of products]"></asp:SqlDataSource>

Regards,
Peter Milchev
Telerik by Progress

[Dan Ehrmann]

Thanx Peter - that helped me simplify my code - I had overcomplicated it.

For showing the list items, I kept my jQuery code:

    $('li.racItem').css('display', 'list-item');

It feels cleaner than your 'for' loop. Is there any reason it could cause a problem?

[Peter Milchev]

Hello Dan,

We are not aware of any issues that could be caused by using your approach instead of the suggested for loop. 

Regards,
Peter Milchev
Telerik by Progress