Kendo UI 网格下拉列表和 angular

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 个变化：

data-bind="value:Category,events:{ change: onChange }" 看我在绑定中添加了一个 events 对象，我将其声明为 onChange 作为 change 事件处理程序。我们将在下面的第 3 项中讨论这个问题；
对于一个复杂的模板（具有 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；
现在，我在网格中添加了一个 edit 事件。在那种情况下，我创建了一个 observable 对象，我在其中定义了 onChange 函数处理程序。在该函数中，我寻找当前数据源（ds），并在其中的下拉列表中添加所选项目的文本，作为我在上面的模板中使用的属性 OptionText解释了。

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

祝你好运。

Kendo UI 网格下拉列表和 angular

Kendo UI grid dropdown and angular

binding

telerik

kendo-ui

angularjs

kendo-grid