This is a migrated thread and some comments may be shown as answers.

Drop Down Button for Tag List

6 Answers 63 Views
AutoCompleteBox
This is a migrated thread and some comments may be shown as answers.
Dan Ehrmann
Top achievements
Rank 1
Dan Ehrmann asked on 27 Mar 2017, 10:18 PM

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.

 

6 Answers, 1 is accepted

Sort by
0
Dan Ehrmann
Top achievements
Rank 1
answered on 28 Mar 2017, 01:52 PM

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.

0
Peter Milchev
Telerik team
answered on 30 Mar 2017, 04:01 PM
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: 
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan Ehrmann
Top achievements
Rank 1
answered on 28 Apr 2017, 02:19 PM

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

0
Peter Milchev
Telerik team
answered on 03 May 2017, 09:31 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan Ehrmann
Top achievements
Rank 1
answered on 03 May 2017, 08:37 PM

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?

0
Peter Milchev
Telerik team
answered on 05 May 2017, 03:48 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
AutoCompleteBox
Asked by
Dan Ehrmann
Top achievements
Rank 1
Answers by
Dan Ehrmann
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or