Как использовать шаблоны для автозаполнения пользовательского интерфейса Kendo с помощью наблюдаемого MVVM

Я новичок в Kendo UI и все еще многому учусь. Мое требование - создать раскрывающийся список с автоматическим завершением из нескольких столбцов. Я перешел по ссылке ниже, используя текстовое поле автозаполнения Kendo UI с шаблонами. http://demos.kendoui.com/web/autocomplete/template.html .

Однако я не смог найти пример, в котором используются шаблоны с автозавершением с использованием..

кендо.наблюдаемый.

Я использую MVVM observable для привязки данных к полю ввода, как показано ниже.

 <div id="form-container">
    <h2>
        Advisors</h2>
    Select Advisor:
    <div class="autocomplete">
        <input id="div-template" data-role="autocomplete" data-text-field="AdvisorName" data-filter="contains" data-bind="source: advisorsSource, value: selectedAdvisor" />
    </div>
 </div>


<script type="text/javascript">

 $(document).ready(function () {

    var viewModel = kendo.observable({
        advisorsSource: new kendo.data.DataSource({
            minLength: 2,
            template: '<tr>' +
                    '<td>${ AdvisorCode }</dt><td>${ AdvisorName }</td><td>${ Organisation }</td>' +
                  '</tr>',
            transport: {
                type: "json",
                serverFiltering: true,
                read: "Home/Advisors",
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {
                            models: kendo.stringify(options.models)
                        };
                    }
                    return {
                        prefix: options.filter.filters[0].value
                    }; 
                }
            },
            schema: {
                model: { id: "AdvisorCode" }
            }               
        })
    });

    kendo.bind($("#form-container"), viewModel);
})

</script>

HomeController имеет действие, которое возвращает Json, как показано ниже:

 public JsonResult Advisors(string prefix)      
 {
       var list = new List<Advisor>()
       {
              new Advisor { AdvisorCode = 002, AdvisorName = "Alex" , Organisation = "Blue Co"},
              new Advisor { AdvisorCode = 003, AdvisorName = "Foo" , Organisation = "Yellow Co"},
              new Advisor { AdvisorCode = 004, AdvisorName = "Smith", Organisation = "Green Co" },
              new Advisor { AdvisorCode = 005, AdvisorName = "David", Organisation = "Yellow Co" },
              new Advisor { AdvisorCode = 006, AdvisorName = "Alex" , Organisation = "Blue Co"},   
        };

        return Json(list, JsonRequestBehavior.AllowGet);
   }

Автодополнение работает нормально. Однако он показывает только AdvisorName. Похоже, мой шаблон не работает должным образом.

Мне нужно отобразить несколько столбцов (AdvisorCode | AdvisorName | Organization) в раскрывающемся списке, и поиск должен основываться на любом из этих столбцов (а не только на AdvisorName).

Может ли кто-нибудь указать мне правильное направление, как использовать шаблон, чтобы я мог отображать несколько столбцов?

Спасибо и очень признателен.


mvvm asp.net-mvc-3 kendo-ui
person Spock    schedule 13.10.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Получил работу! Как только я переместил атрибут шаблона в поле ввода, он просто работает. Например, см. ниже.

 <input id="advisorautocomp" data-role="autocomplete" 
 data-text-field="Name" data-filter="contains"
        data-bind="source: advisorsSource, value: selectedAdvisor" 
        data-template="template" />

Примечание: шаблон данных = "шаблон"

И шаблон может быть определен, как показано ниже (только пример).

 <script id="template" type="text/x-kendo-template">      
      <tr><td>${ data.Code }</td><td>${ data.Name }</td></tr>      
 </script>

Я не уверен, почему атрибут шаблона javascript не работает с kendo.observable, но на данном этапе приведенное выше решение работает для меня. Я отправил тот же вопрос в форум Kendo UI, и, надеюсь, у них будет полный ответ.

person Spock    schedule 14.10.2012