Dynamically building an autocomplete using an ASMX webservice datasource

[TRA]

I am creating input controls dynamically and using an ASMX web service as its datasource. The example snippets in the doumentation and most forum posts assume that you already know the ID of the <input> when creating the .kendoautocomplete for example:

01.$('#txtReceiptee').kendoAutoComplete({
02.       filter: "startswith",
03.       dataTextField: "Name",
04.       dataSource: new kendo.data.DataSource({
05.           type: "json",
06.           transport: {
07.               read: {
08.                   type: "POST",
09.                   url: "AJAXReceiptee.asmx/GetReceipteeNames",
10.                   contentType: 'application/json; charset=utf-8',
11.                   datatype: "json",
12.                   data: function ()
13.                   {
14.                       return {
15.                           context: $("#txtReceiptee").data("kendoAutoComplete").value().replace(/\ /g, '%')
16.                       }
17.                   }
18.
19.               },
20.               parameterMap: function (options)
21.               {
22.                   return JSON.stringify(options);
23.               }
24.           },
25.           serverFiltering: true,
26.           serverSorting: true,
27.           pageSize: 10,
28.           schema: {
29.               data: "d"
30.           } // schema
31.       })
32.
33.   });

This works just fine because on line 15 I can extract the value of the input field from the known id: #txtReceiptee. However if I create an element dynmaically and want to use the same datasource setup as above, I cannot seem to find a way to direct the data function to reference its 'owned' input:

01.$('<input>').kendoAutoComplete({
02.       filter: "startswith",
03.       dataTextField: "Name",
04.       dataSource: new kendo.data.DataSource({
05.           type: "json",
06.           transport: {
07.               read: {
08.                   type: "POST",
09.                   url: "AJAXReceiptee.asmx/GetReceipteeNames",
10.                   contentType: 'application/json; charset=utf-8',
11.                   datatype: "json",
12.                   data: function ()
13.                   {
14.                       return {
15.                           context: $(" ?????? ").data("kendoAutoComplete").value().replace(/\ /g, '%')
16.                       }
17.                   }
18.
19.               },
20.               parameterMap: function (options)
21.               {
22.                   return JSON.stringify(options);
23.               }
24.           },
25.           serverFiltering: true,
26.           serverSorting: true,
27.           pageSize: 10,
28.           schema: {
29.               data: "d"
30.           } // schema
31.       })
32.
33.   });

This new <'input'> element is in a grid so I will be having multiples of this created dynamically

[Georgi Krustev]

Hello Lance,

 
In general, the scope of DataSource data method is the DataSource itself and that is why you will need to find the specific AutoComplete widget based on ID. If your goal is to sent the filter value, which actually is the input value of the widget, then you can retrieve it from the options passed to the parameterMap method. Other option is to use DynamicLinq and parse the filter options to the server. I have attached a simple web site, which shows how to achieve this with ComboBox widget (applicable for the AutoComplete too). The project is based on this code library.

Regards,
Georgi Krustev
Telerik