AutoCompleteBox with JavaScript Array

[nikhil]

Hi,

Please suggest how can I bind Javascript array as a datasource of AutoCompleteBox.

[Viktor Tachev]

Hello,

If you would like to bind the RadAutoCompleteBox on the client-side you can use one of the approaches illustrated below. You can bind the control to a WebService or to a RadClientDataSource control.

• http://docs.telerik.com/devtools/aspnet-ajax/controls/autocompletebox/data-binding/binding-to-web-service
• http://docs.telerik.com/devtools/aspnet-ajax/controls/autocompletebox/data-binding/binding-to-radclientdatasource

Regards,
Viktor Tachev
Telerik

[nikhil]

Thanks Viktor for your reply. As I have seen in documentations. I have not found any Javascript funtion so that i can use JavaScript array as a datasource for RadAutoCompleteBox. I have found only server side binding for RadAutoCompleteBox  and I have found a javascript function "set_dataSource(array)" but it is working for RadListView, RadGridView but not for RadAutoCompleteBox.

Please suggest, I am still searching.

[Viktor Tachev]

Hi Nikhil,

The RadAutoCompleteBox does not provide the set_dataSource() client- side method. If you would like to bind a RadAutoCompleteBox control to a JavaScript array you can use the RadClientDataSource control as mediator.

Markup:

<telerik:RadAutoCompleteBox runat="server" ID="RadAutoComplete1" ClientDataSourceID="RadClientDataSource1" DataTextField="value" DataValueField="id"></telerik:RadAutoCompleteBox>

<telerik:RadClientDataSource runat="server" ID="RadClientDataSource1"></telerik:RadClientDataSource>

JavaScript:

function pageLoad() {

    var data = [
        {
            "id": 1,
            "value": "item 1"
        },
        {
            "id": 2,
            "value": "item 2"
        },
        {
            "id": 3,
            "value": "item 3"
        }
    ];

    var dataSource = $find("<%= RadClientDataSource1.ClientID %>");

    dataSource.set_data(data);
    dataSource.fetch();
}

Moreover, with this approach a possible migration would be easier if you decide to get the data from a WebService at a later stage.


Regards,
Viktor Tachev
Telerik

[nikhil]

Thanks Viktor, Above is the code, i was searching for :)