kendo ui autocomplete, как связать для загрузки данных?

Question

Я использую виджеты kendo ui autocomplete с mvc.

Мой index.cshtml файл выглядит следующим образом,

<div class="filter-value"> 
    @(Html.Kendo().AutoComplete() 
    .Name("InspectorId") 
    .DataTextField("RPersonDetails") 
    ) 
</div> 

Вместо того, чтобы поместить источник данных здесь я хочу, чтобы связать его с помощью JavaScript.

Мой Javascript код выглядит следующим образом,

wireEvents: function() { 

    $("#InspectorId").bind("keyup", function() { AISApp.Page.populateDropDown($(this).val()) }); 
}, 


populateDropDown: function (value) { 

    var dataSource = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: AISApp.Page.getSuburbsURL, 
       data: { 
        text: value 
       } 
      } 
     } 
    }); 

    var dd = $('#InspectorId').data("kendoAutoComplete"); 
dd.setDataSource(dataSource); 

}, 

Это работает, но просто интересно, это правильный способ сделать это, или есть способ сделать это без использования событие KeyUp, просто используя кендо Мероприятия?

Благодаря

Answer 1

В вашем .cshtml есть способ использовать помощник Кендо для привязки к DataSource с вашей URL. Затем вы можете автоматически перечитать данные из URL-адреса при нажатии клавиши. В основном он перемещает ваш код javascript в код помощника.

Код будет выглядеть как в этом примере:

<div class="filter-value"> 
    @(Html.Kendo().AutoComplete() 
      .Name("InspectorId") 
      .DataTextField("RPersonDetails") 
      .Filter("contains") 
      .DataSource(source => { 
       source.Read(read => 
       { 
        read.Action("GetProducts", "Home") 
         .Data("onAdditionalData"); 
       }) 
       .ServerFiltering(true); 
      }) 
    ) 
</div> 
<script> 
    function onAdditionalData() { 
     return { 
      text: $("#InspectorId").val() 
     }; 
    } 
</script>