angularjs - 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 个变化:

1. data-bind="value:Category,events:{ change: onChange }" 看我在绑定(bind)中添加了一个 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(dataSource 的当前项)并且:如果它存在，则使用它；否则，使用默认文本。我们将在下面的第 3 项中讨论 OptionText；

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

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

祝你好运。