Kendo UI 网格下拉列表和角度

Question

我尝试在 Kendo UI 中设置自定义下拉菜单。

我有一个关于我的问题的参考。

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

我的问题是我不知道如何在模板属性中设置选定的文本？我想显示文本字段，但将 id 保存为值。 而且我不想使用外部数据源。我希望它在 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 事件处理程序。我们将在下面的第 3 项中讨论这一点；

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（数据源的当前项），并且：如果存在，则使用它；否则，使用默认文本。我们将在下面的第 3 项中讨论OptionText；

3. 现在，我在网格中添加了一个edit 事件。在那个事件中，我创建了一个observable 对象，我在其中定义了onChange 函数处理程序。在该函数中，我寻找当前数据源（ds），并在其中的下拉列表中添加所选项目的文本，作为属性OptionText，我在上面解释的模板中使用。

   李>

我希望这能解释它是如何工作的（事实上，我讨厌使用那些活页夹和可观察对象，但有时需要它们）。

祝你好运。