Please advise.
11 Answers, 1 is accepted
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
0x800a138f - JavaScript runtime error: Unable to get property 'length' of undefined or null reference
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
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
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
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;
}
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
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
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