Dynamically building an autocomplete using an ASMX webservice datasource

2 posts, 0 answers
  1. TRA
    TRA avatar
    7 posts
    Member since:
    Aug 2008

    Posted 19 Aug 2013 Link to this post

    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
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 21 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top