AutoCompleteBox DataBinding with List<T> return as JSON

12 posts, 0 answers
  1. RYNETECH
    RYNETECH avatar
    15 posts
    Member since:
    Feb 2007

    Posted 04 Aug 2013 Link to this post

    I'm trying to find out if it is possible to setup the AutoCompleteBox for ASP.Net Ajax to databind with a webservice (asmx) that returns a List<T> as a JSON string.   The List<T> is simply an Airport object with the properties of AiportID and AirportName.  This web service is hosted by a third party making it impossible for any code at the web service end to make use of the Telerik AutoCompleteBoxDataItem objects to package up a return result.

    Please advise.
  2. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 08 Aug 2013 Link to this post

    Hello Roger,

    With a couple of javascript overrides you could bind the AutoCompleteBox to an arbitrary JSON, as demonstrated in the attached sample page, which uses a dummy Airport class.

    However please keep in mind that in WebService binding scenario the filtering of the DropDown results is implemented in the WebService rather than in the AutoCompleteBox itself, in order to maximize performance. So if the service you're using doesn't filter the items based on the provided text, the filtering functionality won't work.
     

    Regards,
    Bozhidar
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. RYNETECH
    RYNETECH avatar
    15 posts
    Member since:
    Feb 2007

    Posted 09 Aug 2013 Link to this post

    I was able to get the AutoCompleteBox to DataBind with a List<T> object at work.  However, now that I have put this project on my  home office development environment, I'm getting the following internal Telerik JavaScript error.  Please advise.

    http://localhost:23637/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=;;System.Web.Extensions,+Version=4.0.0.0,+Culture=neutral,+PublicKeyToken=31bf3856ad364e35:en-US:c9cbdec3-c810-4e87-846c-fb25a7c08002:ea597d4b:b25378d2;Telerik.Web.UI,+Version=2013.2.717.40,+Culture=neutral,+PublicKeyToken=121fae78165ba3d4:en-US:0507d587-20ad-4e22-b866-76bd3eaee2df:16e4e7cd:365331c3:24ee1bba:92fe8ea0:f46195d3:fa31b949:874f8ea2:19620875:490a9d4e:bd8f85e4:1e771326:78b9daca

    0x800a138f - JavaScript runtime error: Unable to get property 'length' of undefined or null reference

  5. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 13 Aug 2013 Link to this post

    Hello Roger,

    What modifications did you do to the sample project? Such error may happen when the list was not serialized as an array but as an object that contains array. It would be helpful if you provide us with the code of your web service.

    Regards,
    Genady Sergeev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. RYNETECH
    RYNETECH avatar
    15 posts
    Member since:
    Feb 2007

    Posted 13 Aug 2013 Link to this post

    Sorry for any confusion, but here is what I am wanting to happen.  I have a library for making web service calls to Google Place API for autocomplete.  It returns a response object of AutoComplete that has an Items property of List(Of AutoCompleteItem).  What I would like to do is bind the RadAutoCompleteBox directly to the List(Of Google.Response.AutoCompleteItem) collection that is returned by my Google library without having to loop through and create a RadAutoCompleteBoxData.  This is what I am trying, but it gives the error stated in the previous post.  Is this possible?

            <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox2" runat="server" Width="350" DropDownWidth="350" EmptyMessage="Enter address" InputType="Text" ItemType="Google.Response.AutoCompleteItem" DataTextField="Description" DataValueField="Reference">
                <TextSettings SelectionMode="Single" />
                <WebServiceSettings Path="GooglePlace.asmx" Method="GetAutoComplete2" />
            </telerik:RadAutoCompleteBox>

        <WebMethod()> _
        Public Function GetAutoComplete2(context As RadAutoCompleteContext) As List(Of Google.Response.AutoCompleteItem)
            Dim gResponse = Google.Service.Place.AutoComplete("AIzaSyBG7yduT_IqF5B3edY_9VNmkS99HrAjQCY", context("Text").ToString())
            Return gResponse.Items
        End Function

       // these classes are in a DLL having a namespace of Google.Response
        Public Class AutoComplete
            Public Property ResultCode As ResultCodeEnum
            Public Property Items As List(Of AutoCompleteItem)

            Public Sub New()
                ResultCode = ResultCodeEnum.ZeroResults
                Items = New List(Of AutoCompleteItem)
            End Sub

        End Class

     

        Public Class AutoCompleteItem

            Public Property Description As String
            Public Property Reference As String

            Friend Sub New()
                Description = String.Empty
                Reference = String.Empty
            End Sub

            Friend Sub New(ByVal description As String, reference As String)
                Me.Description = description.Trim()
                Me.Reference = reference.Trim()
            End Sub

        End Class

  7. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 16 Aug 2013 Link to this post

    Hi Roger,

    Thank you for the clarifications. What you want to achieve is possible, you only need to apply a bit of custom javascript to parse the data items. For convenience, I've prepared a sample project that uses your code and demonstrates the approach. You can find it attached to this ticket.

    Regards,
    Genady Sergeev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. RYNETECH
    RYNETECH avatar
    15 posts
    Member since:
    Feb 2007

    Posted 17 Aug 2013 Link to this post

    Hey, we have a winner :),  Thank you very much!!! 
     
    However, it leads me to one final question.  Please help me understand the JavaScript code.  What would I have to do if I had a second RadAutoCompleteBox on the same web page, but its List<T> items had properities of AccountName and AccountID.  That leads me to believe I would need a second JavaScript to correctly populate the text/value properties, but how do I tie each JavaScript to the appropriate RadAutoCompleteBox?
     
    Telerik.Web.UI.RadAutoCompleteBox.DropDownItem.prototype._load = function (data) {
                 this._text = data.Description;
                 this._value = data.Reference;
    }
     
    Telerik.Web.UI.RadAutoCompleteBox.DropDownItem.prototype._load = function (data) {
                this._text = data.AccountName;
                this._value = data.AccountId;
    }
  9. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 21 Aug 2013 Link to this post

    Hi Roger,

    Indeed, the current proposal will override the _load method for all instances. If you want to provide different overrides the things can get a bit messy... I understand that this is an issue on our side and we will do our best to resolve it for our next release. Meanwhile, if you want to use a JS workaround you can go around like:

    <script type="text/javascript">
     
               (function ($) {
                   var $TA = Telerik.Web.UI.RadAutoCompleteBox;
     
     
                   $TA.DropDown.prototype.populate = function (data) {
                       var $html = null,
                           me = this;
                        
                       if (data.html)
                           $html = $(data.html);
     
                       this.clear();
     
                       $.each(data, function (index, dataItem) {
                           var item = new $TA.DropDownItem(dataItem);
                           formatDataItem(item, dataItem, me._parent);
     
                           me.trigger("itemDataBound", $.extendEventArgs({}, { item: item, dataItem: dataItem }));
     
                           if (me._clientTemplate)
                               item._renderedClientTemplate = $T.TemplateRenderer.renderTemplate(dataItem, me, item);
                           else if ($html) {
                               var element = $html.get(index);
                               item._setElement(element);
                           }
     
                           me._items.push(item);
                       });
     
                       this.render();
                   };
     
                   function formatDataItem(item, dataItem, autoCompleteBox) {
                       if (autoCompleteBox.id == "RadAutoCompleteBox1") {
                           item._text = dataItem.Reference;
                           item._value = dataItem.Description;
                       }
                   }
     
     
               })($telerik.$);
     
           </script>





    Regards,
    Genady Sergeev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  10. RYNETECH
    RYNETECH avatar
    15 posts
    Member since:
    Feb 2007

    Posted 21 Aug 2013 Link to this post

    Thanks Genady for working this out, but that is definately too messy.  It would be great to see this resolved in the next release.  Although not ideal, I think the better approach would be to have each web service return the same properties in it's items collection.
  11. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 26 Aug 2013 Link to this post

    Hi Roger,

    Well, ideally one should be able to say what are the DataItems using the DataTextField/DataValueField. In this way the client-side binding will work the same way as the server-side one. What do you think?

    Regards,
    Genady Sergeev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  12. RYNETECH
    RYNETECH avatar
    15 posts
    Member since:
    Feb 2007

    Posted 26 Aug 2013 Link to this post

    Yes I agree.  We should be able to specify the binding fields for DataTextField/DataValueField according to our object's definition.  When can you have this done?  :)
  13. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 30 Aug 2013 Link to this post

    Hi Roger,

    We are now considering the approach and will try to implement it for the next release because as it seems the task is too big to have it finished for the  upcoming one.

    Regards,
    Genady Sergeev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017