Kendo UI grid downdown и угловой

Question

Я пытаюсь настроить пользовательский раскрывающийся список в пользовательском интерфейсе Kendo.

У меня есть ссылка на мою проблему.

http://dojo.telerik.com/aFIZa/13

Моя проблема заключается в том, что я не знаю, как я могу настроить выделенный текст в шаблоне атрибут? Я хочу показать текстовое поле, но сохранить его как значение. И я не хочу использовать внешний источник данных. Я бы хотел, чтобы он был встроен в json.

код ниже:

$scope.mainGridOptions = { 
    dataSource: $scope.dataSource, 
    pageable: true, 
    height: 550, 
    toolbar: ["create"], 
    columns: [ 

     { field: "Category", title: "Category", width: "180px", 
     editor: function(container, options) { 
    var editor = $('<input kendo-drop-down-list required k-data-text-field="\'cat\'" k-data-value-field="\'id\'" k-data-source="{data:[{id: 1, cat: \'test\'}, {id: 2, cat: \'test2\'}]}" data-bind="value:Category"/>') 
    .appendTo(container); 

    $compile(editor)($scope); 
    editor.css("visibility", "visible"); 
     } 

     , template:"selected text in the combo " 
     } 
    ], editable: true 


} 

Answer 1

Хорошо, это был непростой, но я думаю, что я мог бы достичь того, что вы хотите, или, по крайней мере, я все ближе:

$scope.mainGridOptions = 
{ 
    dataSource: $scope.dataSource, 
    pageable: true, 
    height: 550, 
    toolbar: ["create"], 
    columns: [ 
    { 
     field: "Category", title: "Category", width: "180px", 
     editor: function(container, options) 
     { 
      // #1 
      var editor = $('<input kendo-drop-down-list required k-data-text-field="\'cat\'" k-data-value-field="\'id\'" k-data-source="{data:[{id: 1, cat: \'test\'}, {id: 2, cat: \'test2\'}]}" data-bind="value:Category,events:{ change: onChange }"/>') 
      .appendTo(container); 

      $compile(editor)($scope); 
      editor.css("visibility", "visible"); 
     }, 

     // #2 
     template:kendo.template($("#column-template").html()) 
    }], 
    editable: true, 

    // #3 
    edit: function(e) 
    { 
     var ko = kendo.observable(
     { 
      onChange: function(e) 
      { 
       var el = $(e.sender.element); 
       var ddl = el.data("kendoDropDownList"); 
       var ds = $scope.dataSource.getByUid(el.closest("tr").data("uid")); 

       ds.OptionText = ddl.text(); 
      }, 
     }); 

     var widget = $(e.container).find("input"); 
     kendo.bind(widget, ko); 
    } 
}}); 

Demo ,

В коде вы можете заметить 3 изменения:

1. data-bind="value:Category,events:{ change: onChange }" Посмотрите, что я добавил events объект в затруднительном, который я объявляю onChange в качестве обработчика события change. Мы поговорим об этом в третьем пункте ниже;

2. Для сложного шаблона (с кодом javascript и логикой) я создал содержимое скрипта и отобразил его в свойстве template. Шаблон состоит в следующем:

   <script id="column-template" type="text/x-kendo-template"> 
       # if (data.hasOwnProperty('OptionText')) { # 
       #: OptionText # 
       # } else { # 
       #: "selected text in the combo" # 
       # } # 
   </script> 
   

   В шаблоне я просто проверить для свойства OptionText в модели (текущий пункт DataSource), и: если она существует, то использовать его; иначе используйте текст по умолчанию. Мы поговорим о OptionText в третьем пункте ниже;

3. Теперь, здесь я добавил событие edit в сетку. В этом случае я создал объект observable, где я определяю обработчик функции onChange. В этой функции я ищу текущий источник данных (ds) и добавляю текст выбранного элемента в раскрывающемся списке в нем, так как свойство OptionText, которое я использую в приведенном выше шаблоне.

Я надеюсь, что это объясняет, как это работает (на самом деле я ненавижу работать с этими связующими и наблюдаемыми, но иногда они необходимы).

Удачи.