Drop Down Button for Tag List

7 posts, 0 answers
  1. Dan Ehrmann
    Dan Ehrmann avatar
    160 posts
    Member since:
    Jul 2004

    Posted 27 Mar Link to this post

    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.

     

  2. Dan Ehrmann
    Dan Ehrmann avatar
    160 posts
    Member since:
    Jul 2004

    Posted 28 Mar in reply to Dan Ehrmann Link to this post

    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.

  3. Peter Milchev
    Admin
    Peter Milchev avatar
    291 posts

    Posted 30 Mar Link to this post

    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.
  4. Dan Ehrmann
    Dan Ehrmann avatar
    160 posts
    Member since:
    Jul 2004

    Posted 28 Apr in reply to Peter Milchev Link to this post

    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

  5. Peter Milchev
    Admin
    Peter Milchev avatar
    291 posts

    Posted 03 May Link to this post

    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.
  6. Dan Ehrmann
    Dan Ehrmann avatar
    160 posts
    Member since:
    Jul 2004

    Posted 03 May in reply to Peter Milchev Link to this post

    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?

  7. Peter Milchev
    Admin
    Peter Milchev avatar
    291 posts

    Posted 05 May Link to this post

    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.
Back to Top