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

AutoCompleteBox DataBinding with List<T> return as JSON

11 Answers 147 Views
AutoCompleteBox
This is a migrated thread and some comments may be shown as answers.
RYNETECH
Top achievements
Rank 1
RYNETECH asked on 04 Aug 2013, 10:35 PM
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.

11 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 08 Aug 2013, 07:04 AM
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.
0
RYNETECH
Top achievements
Rank 1
answered on 10 Aug 2013, 02:52 AM
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

0
Genady Sergeev
Telerik team
answered on 13 Aug 2013, 07:20 AM
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.
0
RYNETECH
Top achievements
Rank 1
answered on 13 Aug 2013, 01:33 PM

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

0
Genady Sergeev
Telerik team
answered on 16 Aug 2013, 10:58 AM
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.
0
RYNETECH
Top achievements
Rank 1
answered on 17 Aug 2013, 12:04 PM
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;
}
0
Genady Sergeev
Telerik team
answered on 21 Aug 2013, 02:53 PM
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.
0
RYNETECH
Top achievements
Rank 1
answered on 21 Aug 2013, 04:42 PM
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.
0
Genady Sergeev
Telerik team
answered on 26 Aug 2013, 02:14 PM
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.
0
RYNETECH
Top achievements
Rank 1
answered on 26 Aug 2013, 09:58 PM
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?  :)
0
Genady Sergeev
Telerik team
answered on 30 Aug 2013, 08:00 AM
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.
Tags
AutoCompleteBox
Asked by
RYNETECH
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
RYNETECH
Top achievements
Rank 1
Genady Sergeev
Telerik team
Share this question
or